Simplest jQuery Slideshow with Text

For a while I’ve been using a jQuery slideshow that I learned from Jonathan Snook’s post: Simplest jQuery Slideshow. On that post Jonathan shows you how to create a slideshow of images without text. This type of slideshow works great with very minimum code. On this tutorial I’d like to extend it by adding some content to go with the images and still keep things at bare minimum At the end of this post you will be able to download source code files. Click here to see a demo of what we are creating.

HTML Code

First things first. Here’s the HTML to give us the structure we need. Notice the rel attribute that contains the text we’d like to show.

<div id="container">
 <div class="fadein">
 <img src="images/demo01.png" align="left" rel="Siplest slideshow image 01" />
 <img src="images/demo02.png" align="left" rel="Siplest slideshow image 02" />
 <img src="images/demo03.png" align="left" rel="Siplest slideshow image 03" />
 </div>
 <div class="txt_content">
 <p></p>
 </div>
</div>

The important thing to note here is that the image tags are inside their own container (with class fadein which you can change if you want). Later on you’ll see that we set the position of the images to absolute so that they are stacked on top of each other. I also have a div (wit class txt_content) that will hold the paragraph tag with the current slideshow text. This div is optional but gives a nice structure to the slideshow.

CSS

Following is the CSS to apply some styling. One thing to note here is that the div containing text will be given an absolute position and an opacity of 0.7 to make it translucent.

div#container {
	position: relative;
}
div.fadein {
	position: relative;
	float: left; clear: left;
}
div.fadein img {
	position: absolute;
	left: 0; top: 0;
	width: 500px; height: 300px;
}
div.txt_content {
	position: absolute;
	left: 0; top: 250px;
	width: 500px; height: 50px;
	opacity: 0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */
	background-color: #000;
}
div.txt_content {
	color: #fff;
}

jQuery

Now comes jQuery to put things together. When the page first loads we grab the rel attribute from the image and use it as text for our paragraph. Then we start a setInterval function so that every 3 seconds (or 3000 milliseconds) the image on top fades out, is moved to the bottom of the image stack and the one on top fades in. Remember that all images except the first one are hidden when the page loads. That’s why we need to fade in the new image on top of the stack.

$(document).ready(function() {
	$(function(){
	    $('.fadein img:gt(0)').hide();
	    $('div.txt_content p').html($('div.fadein img:first-child').attr('rel'));
	    setInterval(function(){

	      $('.fadein :first-child').fadeOut()
	         .next('img').fadeIn()
	         .end().appendTo('.fadein');
	      $('div.txt_content p').html($('div.fadein img:first-child').attr('rel'));
	         }, 3000);
	});
});

That’s all you have to do. I’d like to thank Jonathan Snook once again for writing the first post and freely providing the first pieces of code. Did you find this useful?

{filelink=1}