Super jQuery Image Gallery with Random Animation Effects.

Author: Zeeshan Rasool | Last updated on August 26th, 2010

CSS, JQuery, Web Development

shrek

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

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

$(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

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com