Aug
26

Super jQuery Image Gallery with Random Animation Effects.

Author ZeeShaN    Category CSS, JQuery, Web Development     Tags , ,

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.

Enter your email address:

Delivered by FeedBurner


Download all files to get this 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();
}

I created this for a my friend’s blog. You can download this awesome gallery source files here.

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.







Enter your Email:

Click Here for Popular

Who I Am

Zeeshan Rasool

Software Engineer - PHP
Lahore - Pakistan

zeeshan(@)99points.info
Skype: zeeshan-rasool
gTalk: zishan.rasool85

Categories

Tags

99points adobe AJAX ajax pagination ajax rating ajax tutorial ajax voting system captcha Codeigniter codeigniter 2.0 codeigniter recaptcha CSS css tutorials dreamweaver cs5 Facebook facebox farmville ffmpeg flv google api hacking Joomla JQuery JQuery Gallery JQuery menus Jquery tutorial mafia war Mootools MySQL pagination Payment PHP php curl recaptcha RSS Feed SEO simplepie socail networking ssl Tutorials Twitter wall script Web XSS youtube

Comments