(/)

2009, Mar 30 // Kevin Liew (/author/kevin) //

290 comments (http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption#comments)
// Tutorials (/category/tutorials)

Simple JQuery Image Slide Show with SemiTransparent Caption

Tweet

66

Like

141

28

Advertisement ()

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
(http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited)
Demo (http://www.queness.com/resources/html/slideshow/jquery-slideshow.html)
Download (http://www.queness.com/resources/archives/jquery-slideshow.zip)
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 (http://www.vircom.com/en/products/modusgate-appliance/).
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:

01.

<divid="gallery">

02.
03.

<ahref="#"class="show">

04.

<imgsrc="images/flowingrock.jpg"alt="FlowingRock"alt=""title=""width="580"
height="360"rel="<h3>FlowingRock</h3>Youcanputhtmlelement

05.

insidetheRELattribute."/></a>

06.

</a>

07.

08.

<ahref="#">

09.

<imgsrc="images/grassblades.jpg"alt="GrassBlades"alt=""title=""
width="580"height="360"rel="<h3>GrassBlades</h3>description"/>

10.

</a>

11.

12.

......

13.

......

14.

......

15.
16.

<divclass="caption"><divclass="content"></div></div>

17.

</div>

18.

<divclass="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.

01.

body{

02.

fontfamily:arial

03.

04.
05.

.clear{

06.

clear:both

07.

08.
09.

#gallery{

10.

position:relative;

11.

height:360px

12.

13.

#gallerya{

14.

float:left;

15.

position:absolute;

16.

17.

18.

#galleryaimg{

19.

border:none;

20.

21.

22.

#gallerya.show{

23.

zindex:500

24.

25.
26.

#gallery.caption{

27.

zindex:600;

28.

backgroundcolor:#000;

29.

color:#ffffff;

30.

height:100px;

31.

width:100%;

32.

position:absolute;

33.

bottom:0;

34.

35.
36.

#gallery.caption.content{

37.

margin:5px

38.

39.

40.

#gallery.caption.contenth3{

41.

margin:0;

42.

padding:0;

43.

color:#1DCCEF;

44.

45.

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

01.

$(document).ready(function(){

02.

03.

//ExecutetheslideShow

04.

slideShow();

05.
06.

});

07.
08.

functionslideShow(){

09.
10.

//Settheopacityofallimagesto0

11.

$('#gallerya').css({opacity:0.0});

12.

13.

//Getthefirstimageanddisplayit(setittofullopacity)

14.

$('#gallerya:first').css({opacity:1.0});

15.

16.

//Setthecaptionbackgroundtosemitransparent

17.

$('#gallery.caption').css({opacity:0.7});

18.
19.

//Resizethewidthofthecaptionaccordingtotheimagewidth

20.

$('#gallery.caption').css({width:$('#gallerya').find('img').css('width')});

21.

22.

//GetthecaptionofthefirstimagefromRELattributeanddisplayit

23.

$('#gallery.content').html($('#gallerya:first').find('img').attr('rel'))

24.

.animate({opacity:0.7},400);

25.

26.

//Callthegalleryfunctiontoruntheslideshow,6000=changetonextimageafter
6seconds

27.

setInterval('gallery()',6000);

28.

29.

30.
31.

functiongallery(){

32.

33.

//ifnoIMGshavetheshowclass,grabthefirstimage

34.

varcurrent=($('#gallerya.show')?$('#gallerya.show'):$('#gallerya:first'));

35.
36.

//Getnextimage,ifitreachedtheendoftheslideshow,rotateitbacktothe
firstimage

37.

varnext=((current.next().length)?((current.next().hasClass('caption'))?
$('#gallerya:first'):current.next()):$('#gallerya:first'));

38.

39.

//Getnextimagecaption

40.

varcaption=next.find('img').attr('rel');

41.

42.

//Setthefadeineffectforthenextimage,showclasshashigherzindex

43.

next.css({opacity:0.0})

44.

.addClass('show')

45.

.animate({opacity:1.0},1000);

46.
47.

//Hidethecurrentimage

48.

current.animate({opacity:0.0},1000)

49.

.removeClass('show');

50.

51.

//Settheopacityto0andheightto1px

52.

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

53.

54.

//Animatethecaption,opacityto0.7andheigthto100px,aslideupeffect

55.

$('#gallery.caption').animate({opacity:0.7},100).animate({height:'100px'},500);

56.

57.

//Displaythecontent

58.

$('#gallery.content').html(caption);

59.

60.

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 (http://feeds2.feedburner.com/queness) for more posts.
Thanks!

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