Super jQuery Image Gallery with Random Animation Effects.

Author: Zeeshan Rasool | Aug 26, 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 Stores

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

Author of 99Points
Zeeshan Rasool is an experienced PHP Web Developer and founder at 99Points. Expert in Codeigniter (MVC), WordPress, JSON, jQuery & HTML5

Super jQuery Image Gallery with Random Animation Effects.

If you Like this Tutorial and Want to get New Tutorials news by Email, Then Subscribe Here.

JQuery Code

Recommended WordPress Themes Stores

Friends

Categories

Popular post

Super jQuery Image Gallery with Random Animation Effects.

If you Like this Tutorial and Want to get New Tutorials news by Email, Then Subscribe Here.

JQuery Code

Few More Brilliant Posts !

Recommended WordPress Themes Stores

Friends

Categories

Popular post