Hi,
I would walk you through a tutorial on creating a simple , powerful jquery image slider with titles.
Features:
- Supports any number of images.
- shows animated caption or titles for each image.
- Thumbnail preview with scroll.
- Auto scroll back of thumbnails.
- works fine in many major browsers.
- 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"> </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! :)
