Demo 9 :: Fading

Image galleries can be a big part of a website which is why you see a lot of lightboxes around. But maybe you want to have one of those fading slideshows like some sites have on their front page. Well jQuery can do those too! All you need to do is get the images you want and set them one on top of the other. Then you can fade one out to show the next one giving a nice fading effect.

image1 image2 image3 image4 image5

View the HTML code

<div id="fadingGallery">
    <img src="../lib/img/flowers/blue-to-purple-perennial-flowers-1.jpg" alt="image1" height="300px" width="300px" />
    <img src="../lib/img/flowers/flowers-595.preview.jpg" alt="image2" height="300px" width="300px" />
    <img src="../lib/img/flowers/Flowers-Images.jpg" alt="image3" height="300px" width="300px" />
    <img src="../lib/img/flowers/pretty-pink-flowers-lovely-1.jpg" alt="image4" height="300px" width="300px" />
    <img src="../lib/img/flowers/rose-634.jpg" alt="image5" height="300px" width="300px" />

View the jQuery code

	rotatePics(1);//calls out the rotatePics fucntion

function rotatePics(currentPhoto) {
	var numberOfPhotos = $('#fadingGallery img').length;//grabs the number of all the images in the fadingGallery div
	currentPhoto = currentPhoto % numberOfPhotos;//returns the remainder of currentPhoto divided by numberOfPhotos to keep less than the amount of all the photos
	$('#fadingGallery img').eq(currentPhoto).fadeOut(function() {//grabs the indexed number of the image currently showing and fades the image from the gallery
		$('#fadingGallery img').each(function(i) {//with this, we give each image a stored value
			'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos//with the images we set a z-index for them by offsetting the displayed photo index
		$(this).show();//when the reordering of the picutres happen, the faded one disappears but now being at the bottom of the stack, we show it to be displayed again
		setTimeout(function() {rotatePics(++currentPhoto);}, 3000);//creates a timer to start the rotatePics again with the incremented value of currentPhoto