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.
Download all files to get this gallery.
JQuery Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
$(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(); } |
I created this for a my friend’s blog. You can download this awesome gallery source files here.