Simple jquery image gallery script

Let’s see a jquery image slider code with image titles or a jquery carousel slider example.

jquery image slider code features

• Supports any number of images.
• shows animated captions 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, let’s start…

After you include the 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 a third division “galleryContainer” that holds our thumbnail images, and left and right navigation arrows.

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

You may also read jQuery to export HTML table data into Excel sheet

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

Comment and let us know your views.