Submit your widget

Image Gallery Random Animation Effects with jQuery

Created 11 years ago   Views 14127   downloads 1789    Author ZeeShaN
Image Gallery Random Animation Effects with jQuery
View DemoDownload
92
Share |

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();
}