Super jQuery Image Gallery with Random Animation Effects.
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.
If you Like this Tutorial and Want to get New Tutorials news by Email, Then Subscribe Here.
Download all files to get this gallery.
[ad#ad-3]
[ad#co-2]
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.
[ad#co-4]
Recommended WordPress Themes Store
