Scripting Tutorial

Image Rotation with Crossfade Effect

Posted By: Kyle Crossman Posted on: 04/19/2010

This image rotation script is a nifty way to get a crossfade effect between images in an auto-rotating image gallery. What you'll need to get started:

1. More than 1 image to rotate
2. jQuery

Let's take a look at the HTML markup for the rotating gallery above.

<div id='imgRotate'>
<img src='' alt='' />
</div>

The method I chose to use in making this gallery was to set one image as the background image of the div and the other as the image in the foreground. Thus, you will need to adequately style your image as well as the div so that their heights and widths match. For this example, I will be using 500x200 pixel images.

#imgRotate {
	width:500px; 
	height:200px;
	border: 1px solid black;
}

#imgRotate img{
	display:none;
	width:500px;
	height:200px;
}

You might be wondering why the image is set to be hidden. I'll go into why later. What you'll have at this point is a nice box with a black border and another image with a big red [x] in it. Let's bring this baby to life.

First thing we have to do is build an array of all the images.

$(function() {

imgArray = new Array(); 

imgArray[0] = new Image();
imgArray[0].src = 'img1.jpg';
imgArray[1] = new Image();
imgArray[1].src = 'img2.jpg';
imgArray[2] = new Image();
imgArray[2].src = 'img3.jpg';

The function declaration at the top tells the browser that this is a jQuery script. I've also chosen to set each array item as an image object; this will preload the images. After that, we should declare some constants to make the script easier to modify later.

var numImages = 3;
var fadeTime = 3000; 
var fadeOutTime = 1000;

var count = Math.round(Math.random()*(numImages-1));

You'll want to make sure that numImages is equal to the number of images in your array, NOT to the last number you used in the array list. The difference is made up for later (which is why although the array goes up to 2, I've set numImages as 3). The random number can be omitted if you want it to always start with the same image. The next block is the script that makes this baby run, and I'll do my best to explain the flow of the script and how it works.

$('#imgRotate').css('background','url("' + imgArray[count].src + '")');
$('#imgRotate img').attr('src',imgArray[count].src).fadeIn(fadeTime, _nextImg());

function _nextImg() {
count++;
if (count>(numImages-1)) {
	count=0;
}

$('#imgRotate').css('background','url("' + imgArray[count].src + '")');

$('#imgRotate img').fadeOut(fadeOutTime, function() {
	$('#imgRotate img').attr('src',imgArray[count].src);
	$('#imgRotate img').fadeIn((fadeTime), function() {
			_nextImg()		
		});
	});
}

});

First, we set the background image of the div to whatever the random number was. We then fade in the same image, and set a callback function that will call upon itself to keep the gallery rotating. I chose to fade in the image because I needed to show it in a way that was unobtrusive but allowed me to set a delay (The first image would otherwise fade out immediately). This is also why I chose to style the front image so that it isn't shown.

We then increment the counter so that the next image is selected and set the div's background to that image. This will not be seen by the user because the other image is in front of it. We then fade out the front image, waiting for it to be fully out of view before setting it's source to the same as the image that is currently viewable to the user. Then we fade it back in, which the user will not notice, so that we can repeat the same little trick next time. And at the end, we close the jQuery function that we called at the beginning of the script.

Comments?