jquery image slider tutorial

Hi,

I would walk you through a tutorial on creating a simple , powerful jquery image slider with titles.

Features:

1. Supports any number of images.
2. shows animated caption or titles for each image.
3. Thumbnail preview with scroll.
4. Auto scroll back of thumbnails.
5. works fine in many major browsers.
6. Easy to code and maintain.

Ok, lets start...

After you include jQuery file do the following in your index file,create a division named "capsule" , it will hold our entire slider.Create another division named "image_viewer" to hold our image viewer and title. Last, create third division "galleryContainer" that holds our thumbnail images ,left and right navigation arrows.

NOTE: In order to show captions please write the respective image caption in the respective "title" tag for each image.

complete HTML here:

<div id="capsule">

   <div id="image_viewer">

     <!-- To append click images-->

       <img src="" />

     <!-- To append image titles-->

       <span id="img_title" class="img_title">&nbsp;</span>

   </div>

<div id="galleryContainer">

   <div id="arrow_left"><img src="images/arrow_left.gif"></div>

   <div id="arrow_right"><img src="images/arrow_right.gif"></div>

   <div id="innerscroll">

<!-- Thumbnails -->

<img src="images/Blue hills.jpg" title="picture1" class="image">

<img src="images/Sunset.jpg" title="picture2" class="image">

<img src="images/Water lilies.jpg" title="long text caption test with this one" class="image">

<img src="images/Winter.jpg" title="picture 3" class="image">

<img src="images/Blue hills.jpg" title="picture4" class="image">

<img src="images/Sunset.jpg" title="picture5" class="image">

<img src="images/Water lilies.jpg" title="long text caption test with this one" class="image">

<img src="images/Winter.jpg" title="picture 7" class="image">

<!-- Thumbnails end -->

   </div>

 </div>

</div>

Now for the important one, jQuery!

The comments are self explanatory, so am not talking more about it!.

$(document).ready(function() {

<!-- On page load calculate length of thumbnail images -->

var x = parseInt ($('#innerscroll img').length)- 2; // remove count for 2 images left and right arrow

var count=1; //set counter to calculate image rotation

<!-- end of variale declaration -->

<!-- On page load show default first image and title as viewer image -->

var path = $('#innerscroll>img:first').attr('src');

var caption = $('#innerscroll>img:first').attr('title');

$('#image_viewer>img').attr('src', path).animate({"easing": "linear",'opacity': "1.0"}, 500).show();

$('#image_viewer>span').html("").slideUp('fast');

$('#image_viewer>span').html(caption).slideDown('slow');

<!-- end of action -->

<!-- On click of left arrow move thumbnails and animate right arrow with bright image and dull the current arrow -->

    $('#arrow_left').click(function (event){

    $('#arrow_left img').attr('src','images/arrow_left.gif');

    $('#arrow_right img').attr('src','images/arrow_right_over.gif');

     if(count>3){ count=1; $('#innerscroll').animate({left: 0}, 500); $('#arrow_right  img').attr('src','images/arrow_right.gif');}

    else {

$('#innerscroll').animate({"left": "+=150px",'opacity': "0.5"}, 500).animate({"easing": "easeout",'opacity': "1.0"}, 500);

count++;

}

});

<!-- end of action -->

<!-- On click of right arrow move thumbnails and animate left arrow with bright image and dull the current arrow -->

$('#arrow_right').click(function (event){

$('#arrow_right img').attr('src','images/arrow_right.gif');

$('#arrow_left img').attr('src','images/arrow_left_over.gif');

if(x<count){count=1; $('#innerscroll').animate({left: 0}, 500); $('#arrow_left img').attr('src','images/arrow_left.gif'); }

else {

$('#innerscroll').animate({"left": "-=150px",'opacity': "0.5"}, 500).animate({"easing": "easeout",'opacity': "1.0"}, 500);

count++;

}

});

<!-- end of action -->

<!-- On click of thumbnail load or append the current image and title in the image_viewer division -->

$("#innerscroll img").click(function(){

var path = $(this).attr('src');

var caption = $(this).attr('title');

$('#image_viewer>img').attr('src', path).animate({"easing": "linear",'opacity': "0.5"}, 500).animate({"easing": "linear",'opacity': "1.0"}, 500).show();

$('#image_viewer>span').html("").slideUp('fast');

$('#image_viewer>span').html(caption).slideDown('slow');

});

<!-- end of action -->

});

Finally css :

TIP: Make sure your "#image_viewer" and "#image_viewer img" width are same , to get full image view.

<style type="text/css">

.scrollable{

position:relative;width:610px; height:150px; overflow:hidden; margin:5px;

}

.image{width:150px; height:100px; float:left; display:block; cursor:pointer; margin:2px;

}

.container{ margin:5px; padding:5px; width:690px; background:#fff;

}

.container_theater{ margin:5px; padding:5px; width:690px; background:#000000;

}

#image_viewer{

border:#000000 solid 5px; width:685px; height:300px;

}

#image_viewer img{

width:685px; height:300px;

}

.img_title{

border:#999999 solid 1px; width:100%; height:25px; text-align:center; margin-top:-25px; float:right; opacity: .8; z-index:15; background:#CCCCCC;font-family:Verdana; font-style:oblique; font-weight:800; display:none;

}

#arrow_left{position:absolute;float:left;z-index:10;background-color: #FFF;padding:0px;margin-top:2px;cursor:pointer;

}

#arrow_right{

position:absolute;float:left;right:0px;z-index:10;background-color: #FFF;padding:0px;margin-top:2px;cursor:pointer;

}

#innerscroll{position:absolute;height:100px;left:40px;width:10000px;

}

#galleryContainer{height:102px; /* Height of the images + 2 */

border:1px solid #CCCCCC;

position:relative;overflow:hidden;padding:0px;width:690px;height: 104px;/* IE 5.x - Added 2 pixels for border left and right */

height/* */:/**/102px; /* Other browsers */

height: /**/102px;

}

</style>

Here is how it looks:

jQuery slider by sree

Thats all guys, feedbacks are welcome!

help this blog to grow in anyway you can! :)