Image gallery is now a days is very attractive and important part of any website. JQuery image sliding effects and image galleries are very common these days. Here I have created an amazing and animated jquery image gallery which is very simple to use and implement in your web pages. I used animate() function to animate the images and another effect is on hover, which changes images from black and white to colored. I hope you will like this attractive gallery.

JQuery Code

$(document).ready(function(){
 $("img.a").hover(
 function() {
 $(this).stop().animate({"opacity": "0"}, "slow");
 },
 function() {
 $(this).stop().animate({"opacity": "1"}, "slow");
 });
 
});
 
$( init );
var num =0;
function init() {
 
 $('img.a').click( function() {
 
  var num = Math.floor(Math.random()*15);
 
  hideImage(num);
 
  var id   = $(this).attr("id");
  $('#'+id+'_caption').show();
 
  $('#'+id+'image').animate( {
     bottom: '0px',
     width: '500px',
     height: '302px',
     opacity: 1,
   },300 );
 
 } );
}
function hideImage(num)
{
 if(num%2 == 0)
 {
  $('img#1image').width(0).hide();
  $('img#2image').width(0).hide();
  $('img#3image').width(0).hide();
  $('img#4image').width(0).hide();
  $('img#5image').width(0).hide();
  $('img#6image').width(0).hide();
 }
 else
 {
  $('img#1image').height(0).hide();
  $('img#2image').height(0).hide();
  $('img#3image').height(0).hide();
  $('img#4image').height(0).hide();
  $('img#5image').height(0).hide();
  $('img#6image').height(0).hide();
 }
 
 $('#1_caption').hide();
 $('#2_caption').hide();
 $('#3_caption').hide();
 $('#4_caption').hide();
 $('#5_caption').hide();
 $('#6_caption').hide();
}