1 reply to this topic

[themanilamen]

http://clagnut.com/sandbox/imagefades/

What I’d really like to be able to do is fade-transition through an array of images without user input. I don’t want/need to iterate through the array more than once, but all my attempts this afternoon failed badly. Any feedback / suggestions / pointers from more experienced javascript folks would be greatly welcomed.

[truefusion]

Here's an old JavaScript script using JQuery i did. You may modify it to fit your needs. This script loops through the images infinitely, and doesn't attempt to preload the images before displaying. It doesn't do an overlap fade, where the next image fades on top of the previous image, but that can be fixed if you convert the anchor element into a block-level element and adjust its size to the current image, then upon fade place the image as the background of it and start fading in the next image, and repeat. I've only been modifying this script based on "necessity," so if you notice anything you don't like, you'll have to adjust it accordingly.

var index = 0;
var links = ["URL_for_first_image", "URL_for_second_image"];
var images = ["/path/to/first_image.jpg", "/path/to/second_image.jpg"];

$(document).ready(
	function(){
		banner_rotate();
	}
);

function banner_rotate(){
	if (!$('#image-rotate').length){
	$('#rotate').attr("href", links[index]);
	$('#rotate').append("<img id=\"image-rotate\" src=\""+images[index]+"\" alt=\"\"/>");
	}
	setTimeout(doBannerFade, 7000);
}

function doBannerFade(){
	$('#image-rotate').fadeOut(1250, function()
		{
			index++;
			if (index == images.length){
			index = 0;
			}
			$('#image-rotate').attr("src", images[index]);
			$('#image-rotate').fadeIn(1250, function()
				{
					banner_rotate();
				}
			);
			if (links[index] != "#removeAttr"){
			$('#rotate').attr("href", links[index]);
			} else {
			$('#rotate').removeAttr("href");
			}
		}
	);
}

<a id="rotate" style="border: 0;"></a>