HOWTO: create fading header images

juggledad · #1 Apr 29, 2010, 07:33 AM

[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.