Developpement Informatique

mars 8, 2010

Fancy Thumbnail Hover Effect w/ jQuery

Classé dans : JQuery — izaam01 @ 6:03  

Recently I was checking out some nice flash galleries and came across an effect that I really liked. I had a sudden urge to duplicate that similar effect but using my bread and butter (CSS and jQuery). I thought I’d share this and maybe some of you can find it useful.

Fancy Thumbnail Hover Effect w/ jQuery

View Demo

Build the Foundation – XHTML

Our markup will be fairly simple, just an unordered three columned list.

<ul>
	<li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb2.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb3.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb4.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb5.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb6.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb7.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb8.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb9.jpg" alt="" /></a></li>
</ul>

Dress it Up – CSS

Pay close attention to the positioning properties between the list item and the image. We have to make sure that the hovered image must be on top of the other images, so this part is key.

ul.thumb {
	float: left;
	list-style: none;
	margin: 0; padding: 10px;
	width: 360px;
}
ul.thumb li {
	margin: 0; padding: 5px;
	float: left;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 110px;
	height: 110px;
}
ul.thumb li img {
	width: 100px; height: 100px; /* Set the small thumbnail size */
	-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
	border: 1px solid #ddd;
	padding: 5px;
	background: #f0f0f0;
	position: absolute;
	left: 0; top: 0;
}
ul.thumb li img.hover {
	background:url(thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
	border: none; /* Get rid of border on hover */
}

*Note – For more information about this property: -ms-interpolation-mode: bicubic, refer to Chris Coyier’s Bicubic Scaling fix for IE. For those who are using PNG files as the background, refer to my previous article, “PNG Transparency Fix in IE6“.

Bring it to Life – jQuery

Basically all we are doing is animating the thumbnail’s size, absolute positioning coordinates (vertical alignment w/ css), and padding when we hover over. During this animation, we also switch the value of the z-index, so that the selected image stays on top of the rest.

$("ul.thumb li").hover(function() {
	$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
	$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
		.animate({
			marginTop: '-110px', /* The next 4 lines will vertically align this image */ 
			marginLeft: '-110px',
			top: '50%',
			left: '50%',
			width: '174px', /* Set new width */
			height: '174px', /* Set new height */
			padding: '20px'
		}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

	} , function() {
	$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
	$(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
		.animate({
			marginTop: '0', /* Set alignment back to default */
			marginLeft: '0',
			top: '0',
			left: '0',
			width: '100px', /* Set width back to default */
			height: '100px', /* Set height back to default */
			padding: '5px'
		}, 400);
});

*Note – To learn more about Animation Queue Buildup, read “Quick Tip: Prevent Animation Queue Buildup” at www.LearnjQuery.com

Fancy Thumbnail Hover Effect w/ jQuery

View Demo

Conclusion

It may not be as smooth as the flash version, but its definitely a neat effect. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well. If you have any questions or comments, please don’t hesitate to let me know!

About these ads

Poster un commentaire »

Pas encore de commentaire.

Flux RSS des commentaires de cet article. TrackBack URI

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Thème Shocking Blue Green Propulsé par WordPress.com.

Suivre

Recevez les nouvelles publications par mail.

%d bloggers like this: