Simple jquery image gallery script

()

Lets see a jquery image slider code with image titles or jquery carousel slider example.

jquery image slider code 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 holders 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 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 :

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>

Comment and let us know your views

Hit Like if this article was useful to you!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Leave a Reply

Your email address will not be published. Required fields are marked *