Sep
18

JQuery Based Flipped Image Gallery with Bounce Effects

Author ZeeShaN    Category CSS, JQuery, PHP, Web Design     Tags , ,

Image galleries are most important element of any website. Here, I have created a simple jQuery based flipped image gallery. On hover the images will expand. Its simple and stylish gallery. My previous jquery image gallery was appreciated and I thought to give my readers an other one. Hope you will like it. Thanks.

Enter your email to subscribe :

Delivered by FeedBurner

JQuery Code

$(document).ready(function(){
 
	///single
    $("ul#single li").mouseover(function(){
        $(this).stop().animate({height:'400px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
 
    $("ul#single li").mouseout(function(){
         $(this).stop().animate({height:'42px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
 
	//horizontal
    $("ul#horizontal li").mouseover(function(){
        $(this).stop().animate({width:'650px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
 
    $("ul#horizontal li").mouseout(function(){
        $(this).stop().animate({width:'40px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
 
	//vertical
	 $("ul#vertical li").mouseover(function(){
        $(this).stop().animate({height:'400px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
 
    $("ul#vertical li").mouseout(function(){
        $(this).stop().animate({height:'42px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
 
});

HTML

<ul id="single"> 
		<li><img src="6.jpg" width="782" alt="" height="440" /></li> 
	</ul> 
 
	<br clear="all" />
 
	<h2>Horizontal Gallery Effect</h2>
 
	<ul id="horizontal"> 
		<li><img src="1.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="2.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="3.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="4.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="5.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="6.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="7.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="8.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="9.jpg" width="782" alt="" height="440" /></li> 
	</ul> 
 
	<br clear="all" /><br clear="all" />
 
	<h2>Vertical Gallery Effect</h2>
 
	<ul id="vertical"> 
		<li><img src="1.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="2.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="3.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="4.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="5.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="6.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="7.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="8.jpg" width="782" alt="" height="440" /></li> 
		<li><img src="9.jpg" width="782" alt="" height="440" /></li> 
	</ul>

CSS

/* CSS Document */
ol, ul {
	list-style: none;
}
h1 { font: bold 40px/40px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }
h2 { font: bold 30px/30px Helvetica, Arial, Sans-serif; color: #BFBF00; text-shadow: 0px 2px 6px #999; margin-left:20px;}
body {
}
body a {
	text-decoration:none;
}
#wrapper {
	width:900px;
	margin-left:auto;
	margin-right:auto;
	overflow:visible;
	margin-top:20px;
}
#vnav #horizontal li img{ border:solid 4px #999999; -moz-border-radius: 5px;
    -webkit-border-radius: 5px;}
#vnav #horizontal li {
	height:447px;
	width:42px;
	float:left;
	cursor:pointer;
	overflow:hidden;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #222;
}
 
#vnav #vertical li img{ border:solid 4px #999999; -moz-border-radius: 5px;
    -webkit-border-radius: 5px;}
#vnav #vertical li {
	height:42px;
	width:650px;
	cursor:pointer;
	overflow:hidden;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #222;
}
#vnav #single li img{ border:solid 4px #999999; -moz-border-radius: 5px;
    -webkit-border-radius: 5px;}
#vnav #single li {
	height:42px;
	width:650px;
	cursor:pointer;
	overflow:hidden;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #222;
}

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 plugins Jquery tutorial mafia war Mootools MySQL pagination PHP php curl recaptcha RSS Feed SEO simplepie socail networking ssl Tutorials Twitter wall script Web XSS youtube

Comments