Simple JQuery Image Slide Show with Semi-Transparent Caption

Simple JQuery Image Slide Show with Semi-Transparent Caption


Simple JQuery Image Slide Show with Semi-Transparent Caption

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 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 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

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

289 comments

Rahul yadav
Fri, 12th October 2012
my question is that would u please tell me the jquery book name which one is better for study
n i study in MCA 5 sem Reply
salvel
Wed, 27th February 2013
one day tech to jquery Reply
onpon4
Fri, 2nd November 2012
Is there any way you could release the custom script used here under another free license (one more suited for programs, such as the GNU GPL or X11 license)? LibreJS doesn't detect CC licenses when considering whether to block Javascript, so it blocks this code. These are the licenses it can detect:

http://www.gnu.org/software/librejs/manual/html_node/Free-Licenses-Detection.html Reply
sAHIL
Sat, 17th November 2012
ki h eh Reply
juan carlos zabala
Mon, 19th November 2012
thanks does not work with Google Chrome...please help me......www.aguilas.com Reply
Sailesh
Thu, 13th December 2012
Very useful Thanks alot........ Reply
Lalo
Mon, 17th December 2012
Hello! I really like this, but don't know where to put the JS part on blogger :( Reply
Fabio
Wed, 19th December 2012
This is totally awesome! After more than two hours searching, your script is the one that finally works with my very specific case: transparent images and z-index requirements. Thank you very much! Reply
Abdul
Wed, 26th December 2012
What a nice sharing............................thanks a lot Reply
JV
Tue, 8th January 2013
it is commercial use Reply
Basanta
Fri, 11th January 2013
It works relly well in chrome but doesnot work in mozilla.Please help me Reply
Kundan
Wed, 20th February 2013
great blog. Reply
budoor
Mon, 18th March 2013
can i add more than one inside html Reply
Stephen
Mon, 15th April 2013
Hi, I just a beginner in developing web site, i am using your JQuery , but when i just change <a href="#"> to <a href="www.google.com" >, it show me ( ....../slideshow/jquery-slideshow.html/www.google.com ) in the browswer , can i know how to solve it ? I want link to ( www.google.com ) Reply
Márcia
Fri, 24th January 2014
you got to put in the complete url http://www.google.com Reply
Yanet
Fri, 26th April 2013
Hi! great job.. can i make it fullscreen? how? I'm new in this :) Reply
Ors
Sat, 11th January 2014
Hy!! I love it :))
But i must to use 2 times... I just leave the javascript and copy paste the <a class="show"> .(images and everthing)..</a> but its not working only the first one the second is not working... Whats the problem??? :S Reply
Emily
Thu, 16th January 2014
Did you leave the "rel" attribute in each <img> tag? The JavaScript for this slider depends on the "rel" attribute remaining intact (although you can change the caption text). Reply
Tsvetan Ginin
Thu, 31st July 2014
Nice job Kevin. Just what I need. Thanks for the help! Can I use it in business website of my customer?

Best regards,
Tsvetan Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement