Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

HOWTO: create fading header images


 
Prev Previous Post   Next Post Next
  #1  
Old Apr 29, 2010, 07:33 AM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
HOWTO: create fading header images

[This comes from a tip by johanl from post http://forum.bytesforall.com/showthread.php?t=4046] - nice find it looks very nice!

If you would like to have a cross-fade (gentle fade in/out) the multiple header images instead of the harsh image rotation, edit js.php and change line 61 (in version 3.4.4-3.4.6) from
HTML Code:
window.onload = RotateHeaderImages;
to
HTML Code:
// Smooth fading code starts here
var fadeInSpeed=2500; // ms
var fadeOutSpeed=2000; // ms

function PrepareRotatingImages() {
	if (document.body){
        if(HeaderImages.length < 2) 
            return; 
		imageContainer = jQuery('#imagecontainer');
        imageContainer.css("background","none"); 
        for(i=0; i < HeaderImages.length; i++) {
            imageContainer.append("<div id=\"himage" + i + "\" style=\"overflow:hidden;display:none;position:absolute;top=0;left=0;width:100%;height:<?php echo $bfa_ata["headerimage_height"]?>px\"><img src=\""+HeaderImages[i]+"\"/></div>");
        }
        jQuery("#himage"+j).fadeIn(fadeInSpeed);
        SmoothRotateHeaderImages();
    }
}

function SmoothRotateHeaderImages() {
    fadeOutImage=jQuery("#himage"+j);
    j+=1; if(j>(HeaderImages.length-1)) j=0;
    fadeInImage=jQuery("#himage"+j);
    fadeInImage.fadeIn(fadeInSpeed);
    fadeOutImage.fadeOut(fadeOutSpeed);
    t = setTimeout('SmoothRotateHeaderImages()', <?php echo $bfa_ata['header_image_javascript']; ?>000);
}

window.onload = PrepareRotatingImages;
// end smooth fading
Make sure you have set ATO->Header Image->Rotate header images with Javascript? to a number greater than '0' or this will not work.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Oct 12, 2010 at 05:28 PM.
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
HOWTO: put your image in the header juggledad Header 71 Jan 12, 2011 01:42 PM
[SOLVED] Fading header images mc38 Header configuration & styling 41 Apr 29, 2010 07:34 AM
HOWTO: have TWO background images on page Stingraynut Atahualpa 3 Wordpress theme 0 Apr 5, 2010 07:16 PM


All times are GMT -6. The time now is 01:41 AM.


Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.