Alessandro Dotti Contra

Linux/Unix DevOps


JQuery fading slideshow

A slideshow is a nice way to show a set of pictures; the fading effect is a little touch that add some non boring dinamicity without getting too much in the way.

There's more than one way to implement a slideshow with the jQuery library, and this is just one.

HTML markup

<p><a href="#" id="start">Start the slideshow</a></p>

<div id="slideshow">
<div class="cover">
<img src="img0.png" alt="Image zero" />
</div>
<div class="images">
<img src="img1.png" alt="Image one" />
<img src="img2.png" alt="Image two" />
<img src="img3.png" alt="Image three" />
</div>
</div>

First we need to creatd a container for our slideshow, then we add inside it a block for a custom cover and a wrapper for the actual images. We also need a link to start the slideshow.

CSS snippet

#slideshow {
	position: relative;
	width: 640px;
	height: 400px;
}
#slideshow .cover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#slideshow .images img {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
}

Our slideshow is a fixed width box. The cover and the images are absolutely positioned inside it; the z-index property allow to position the images above the cover.

Code snippet

function slideshow(target,timeout,duration) {
	target = target + ' .images img';
	var slides = $(target);
	$(slides).each(function(index) {
		//Fade effects are delayed for each slide
		$(this).delay(index * timeout).fadeIn(duration);
		$(this).delay(timeout).fadeOut(duration);
	});
}

The code part is pretty easy: we cycle through all the slideshow images and fade them in and out at regular intervals.

<script type="text/javascript">
$(document).ready(function() {
	$('#start').click(function(){
		slideshow('#slideshow',3000,1000)
	});
});
</script>

Finally, let's start the slideshow when our links is clicked: we can specify the wrapper that contains the images, the timeout between the images and the duration of the fading effect.

View demo