Simple JQuery Image Slide Show with Semi-Transparent Caption

Written by Kevin Liew on 30 Mar 2009
371,338 Views • Tutorials

Introduction

Update 17 Dec 2009: I have created a new version of this image slide show. It's more efficient, clean and simple. Please visit: jQuery Photo Slide Show with Slick Caption Tutorial Revisited

I will no longer provide support for this old tutorial

Image Slide Show is one of the famous components in web design and development. A lot of the websites display news headlines in an image slide show to attract viewers attention, of course, with caption/excerpt. No doubt about it, this is a clever method not only to gain attentions, but it also makes the website more alive (not too static, dull).

Before we start, check out this industry-leading, unrivaled email security and anti-spam appliance hardware - Anti spam for Exchange.

So, here we go again, I separated my codes into 3 sections: html, css and javascript and I will explain how it works in each section.

Advertisement

1. HTML

My ultimate objective is - to keep the html as simple as possible. So, the final product is as following. The first image has a class called "show". Class show has higher z-index, so image with this class will display on top, thus image with this class will always display on top of the rest. The second thing you need to know is the DIV with "caption" class. It has the highest z-index. That DIV will be used to display the caption. The caption is retrieve from the REL attribute in the img element. You can put html element in the REL attribute. Be aware of extra padding and margin of the html elements you used. (eg h1, p).

Have a look at the html code:

<div id="gallery">

	<a href="#" class="show">
	<img data-src="images/flowing-rock.jpg" alt="Flowing Rock" alt="" title="" width="580" height="360" rel="<h3>Flowing Rock</h3>You can put html element 
	inside the REL attribute."/></a>
	</a>
	
	<a href="#">
		<img data-src="images/grass-blades.jpg" alt="Grass Blades" alt="" title="" width="580" height="360" rel="<h3>Grass Blades</h3>description"/>
	</a>
	
	......
	......
	......

	<div class="caption"><div class="content"></div></div>
</div>
<div class="clear"></div>

2. CSS

In this section, I declared a container #gallery for this image slide show. The CSS for this tutorial is pretty straight foward, the most importance thing is the z-index. You have to make sure the "show" class z-index is lower than the "caption" z-index.

body{
	font-family:arial
}

.clear {
	clear:both
}

#gallery {
	position:relative;
	height:360px
}
	#gallery a {
		float:left;
		position:absolute;
	}
	
	#gallery a img {
		border:none;
	}
	
	#gallery a.show {
		z-index:500
	}

	#gallery .caption {
		z-index:600; 
		background-color:#000; 
		color:#ffffff; 
		height:100px; 
		width:100%; 
		position:absolute;
		bottom:0;
	}

	#gallery .caption .content {
		margin:5px
	}
	
	#gallery .caption .content h3 {
		margin:0;
		padding:0;
		color:#1DCCEF;
	}
	

3. Javascript

Finally, the Javascript code. I have added comments in each line to explain what it does. My concept for this image slide show:

  • Hide all the images
  • Display the first image and caption
  • Find the image with "show" class, and grab the next image using next() method
  • Add "show" class to next image
  • Animate the image (fadeout the current image, fadein next image)
  • And, it repeats above steps over and over again
$(document).ready(function() {		
	
	//Execute the slideShow
	slideShow();

});

function slideShow() {

	//Set the opacity of all images to 0
	$('#gallery a').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('#gallery a:first').css({opacity: 1.0});
	
	//Set the caption background to semi-transparent
	$('#gallery .caption').css({opacity: 0.7});

	//Resize the width of the caption according to the image width
	$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
	
	//Get the caption of the first image from REL attribute and display it
	$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
	.animate({opacity: 0.7}, 400);
	
	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('gallery()',6000);
	
}

function gallery() {
	
	//if no IMGs have the show class, grab the first image
	var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));	
	
	//Get next image caption
	var caption = next.find('img').attr('rel');	
	
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
	//Set the opacity to 0 and height to 1px
	$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });	
	
	//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
	$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
	
	//Display the content
	$('#gallery .content').html(caption);
		
}

Conclusion

Finally, you will have a nice and simple jQuery image slide show with a semi-transparent caption. Make sure you check out the demo and download the source code to play with it. Last but not least, I need your support :) If you like this article, please help me to promote it by adding this post into your bookmark. Or you can subscribe to my RSS for more posts. Thanks!

Update

14-4-2009: Fixed caption problem. Thanks to one of the readers kpastore.

Update 17 Dec 2009: I have created a new version of this image slide show. It's more efficient, clean and simple. Please visit: jQuery Photo Slide Show with Slick Caption Tutorial Revisited

I will no longer provide support for this old tutorial

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

291 comments
Elba Lapos 16 years ago
That is exactly what I was looking for, thanks for sharing. I have two problems: The text in the caption div doesn't render properly in Chrome ( I guess this is something with the rendering engine...) Is there way to prevent it? The second problem is that Dreamweaver says the img tag is invalid because of the duplicates...and after editing your script in it only one of the images is shown.
Reply
kpastore 16 years ago
Great, simple and efficient! Thanks for this. I do notice a slight issue with the caption though, and wondered if you had a fix. Just before the image rotates and the caption disappears, you can see the next caption being loaded. I am not experienced enough in jQuery to do this myself yet, but was hoping that you or someone on the board could help.

Thanks in advance!
Reply
maty1206 16 years ago
Thanks a lot! This is my first time using Jquery code and it works perfect.

I appreciate your help.
Reply
bluebird 16 years ago
Thank a lot for the tut! Works fine in Mozilla, But I, too, hava a problem with the caption in IE6:-(( Wondering if anyone knows how to fix it?
Reply
Mats A. 16 years ago
Hi!

Having the same "problem" with the text (for the next slide) appearing as the current text are fading away.

Hoping and crossing my fingers for a fix! :-)
Reply
kpastore 16 years ago
OK, so I think I found an answer. On the line here:

//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:50 }).animate({height: '1px'}, { queue:true, duration:300 });
//

Change "duration:50" to "duration:0". Leave the 300 the same.

That should alleviate the caption 'flash' before the new image loads.
Reply
kevin Admin 16 years ago
@kapstore: thanks for that small fix. it looks even better now.

@Mats A, Bluebird: kapstore's solution will meet your needs :)
Reply
anestesya 16 years ago
Very good! Simple and efficient, was looking for this for some time now. I would like to report a problem, too, realized that for images of different sizes they can be accessed by the mouse even when not presented to the user, because there is just not visible to the user's eyes. I found a solution! Instead of the user function to let the photos used the opaque property display: none to hide the image and display: block to bring it to the user.
Reply
anestesya 16 years ago
What I believe to be correct!
//Set the opacity of all images to 0
$('#gallery a').css("display","none");

//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css("display", "block" );

//Set the fade in effect for the next image, show class has higher z-index
next.css({
display: 'block',
opacity: 0.0
})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.css({display: 'none'})
.removeClass('show');

I hope I have helped! :-)
Reply
kevin Admin 16 years ago
@anestesya: *salute* thanks for the solution :)
Reply
thelastpulse 16 years ago
@anestesya - great fix! made the animations a lot smoother. however I'm still having the firefox/chrome issue with the caption header appearing before it fades in
Reply
Eric.Cheng 16 years ago
Great work! lite but powerful.

I will make a joomla module base on it.
Reply
Keith Kesler 16 years ago
I like this slideshow and the advice anestesya gave was helpful in fixing that particular issue but not I notice that the picture disapears quickly instead of fading away. I already changed the number aftercurrent.animate({opacity: 0.0}, 1000)
but it doesn't seem to affect this. If anybody has a solution let me know.
Reply