JQuery Based Flipped Image Gallery with Bounce Effects

Written By: Zeeshan Rasool  |  Posted In: CSS, JQuery, PHP, Web Design

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

     
		
    •  
	
 
	
	


	
Horizontal Gallery Effect

	
	
     
		
    •  
		
    •  
		
    •  
		
    •  
		
    •  
		
    •  
		
    •  
		
    •  
		
    •  
	
 
	
	


	
	
Vertical Gallery Effect

	
	
     
		
    •  
		
    •  
		
    •  
		
    •  
		
    •  
		
    •  
		
    •  
		
    •  
		
    •

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;
}

You also might like:

  1. Fresh JQuery Image Gallery with Captions and Auto Play/Pause Rotation
  2. Super jQuery Image Gallery with Random Animation Effects.
  3. jQuery Tutorial: Create jQuery and CSS based Awesome navigation.
  4. Learn How to Create Super CSS3 and jQuery Based Menus

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


Zeeshan Rasool is the founder and editor of this blog. Beside this, he is an experienced PHP web developer and freelancer. He loves to create best and interactive web apps. You can follow him at twitter @99_Points and facebook OR drop an email at 99points.info@gmail.com

33 to “JQuery Based Flipped Image Gallery with Bounce Effects”

Post comment


Email Subscriber!

Be the first to know about new updates


Fan Page Follow Us Follow Us Feed Subscribers
Advertisement


Categories

Popular post

Recommend