jQuery Thumbnail with Zooming Image and Fading Caption Tutorial

Written by Kevin Liew on 26 Aug 2009
338,977 Views • Tutorials

Introduction

I came across quite a lot of CSS gallery websites that using huge thumbnail to showcase beautiful websites. Some of them are just ordinary thumbnail, but a lot of them have javascript animated caption to convey more information to viewers. In this tutorial, we will learn how to make ordinary thumbnail to something more. This is my second tutorial about thumbnail gallery, if you missed the first one, you might want to read it later - Create a thumbnail gallery with slick heading and caption effect.

1. HTML

 

<div class="zitem">
	<a href="#"><img data-src="1.jpg" alt="Test 1" title="" width="125" height="125"/></a>
	<div class="caption">
		<a href="">Test 1</a>

	</div>
</div>

<div class="zitem">
	<a href="#"><img data-src="2.gif" alt="Test 2" title="" width="125" height="125"/></a>
	<div class="caption">
		<a href="">Test 2</a>

	</div>
</div>

<div class="zitem">
	<a href="#"><img data-src="3.png" alt="Test 3" title="" width="125" height="125"/></a>
	<div class="caption">
		<a href="">Test 3</a>

	</div>
</div>

2. CSS

I have added inline comment in the following CSS code. If you want to learn more about CSS, read my previous post 15 CSS Tips and Tricks or, you want to know MORE ABOUT CSS, read my new post - 15 Ways to Optimize CSS and Reduce CSS File Size

.zitem {
	width:125px;
	height:125px;	
	border:4px solid #222;	
	margin:5px 5px 5px 0;
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
}

.zitem .caption {
	width:125px;
	height:30px;
	background:#000;
	color:#fff;
		
	/* fix it at the bottom */
	position:absolute;
	bottom:-1px; /* fix IE issue */
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=70);    /* ie  */
	-moz-opacity:0.7;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.7;    /* for really really old safari */  
	opacity: 0.7;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.zitem .caption a {
	text-decoration:none;
	color:#fff;
	font-size:12px;	
	
	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
}

img {
	border:0;
	
	/* allow javascript moves the img position*/
	position:absolute;
}

3. Javascript

This is a simple jQuery script with hover effect. What we have to do is calculate the width and height and set it to the image.

	
$(document).ready(function() {

	//move the image in pixel
	var move = -15;
	
	//zoom percentage, 1.2 =120%
	var zoom = 1.2;

	//On mouse over those thumbnail
	$('.zitem').hover(function() {
		
		//Set the width and height according to the zoom percentage
		width = $('.zitem').width() * zoom;
		height = $('.zitem').height() * zoom;
		
		//Move and zoom the image
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
		
		//Display the caption
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100});	

		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});

});

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, buy me a drink in the bottom of the page or, just bookmark it and help me to spread this tutorial to the rest of the people who you think they are interested! :) Thanks!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

51 comments
Eric 15 years ago
Kevin! Nice! You are one ahead of me on submissions!
I do have a nice site, actually its Demian's site, or DLB

One tutorial, along the lines of this one is:http://www.configuracionvisual.com/category/videos/

Next, check out his site logo sprite effect.
Then his lavalamp navigation is phenomenal!

His social networking mouseovers are sweetly animated

And his tooltip like PORTFOLIO mouseover is awesome!
Reply
kevin Admin 15 years ago
yea, I saw it, it's pretty sweet, lot of them are fade in and fade out effect (logo and social bookmarking). The lava lamp menu is pretty sweet, if you look at my lava lamp tut, that can be achieve by replacing the box to an image look like that as well.

However, I really like the spotlight effect, I guess I will make a tut bout it. Thanks eric!
Reply
Balaji 15 years ago
Wow, I hadn't thought about it that way before. Good write up, very clearly written. Have you written previously about jQuery Thumbnail with Zooming Image and Fading Caption Tutorial? I'd love to read more.
Reply
kevin Admin 15 years ago
Hi Balaji, I have a similar post called : Create a thumbnail gallery with slick heading and caption effect.

http://www.queness.com/post/484/create-a-thumbnail-gallery-with-slick-heading-and-caption-effect-with-jquery
Reply
dj münchen 15 years ago
Aha-wieder was gelernt
Gruss aus Bayern
Reply
Eric 15 years ago
Balaji, If you have anything jQuery related in terms of how to do something, Kevin can get you the answer, demo or whatever quickly!
Kevin offers great commenting in his tuts as well!
If you find effects that you are curious about, submit to Kevin and he will help you see the light! LOL
Kevin, hope it is ok to promote you like this! You have just totally helped me a lot!
Reply
kevin Admin 15 years ago
Haha, Eric, thanks for your compliments. it's alright, I will try my best to be helpful. ;)
Reply
Dan Whitmore 15 years ago
Really nice effect, I'll definitely use this!

Thanks Kevin,

Dan
Reply
web designer 15 years ago
thanks
Reply
Kelly 15 years ago
This is very neat, I\'m going to add this to my wordpress blog for thumbnails in the sidebar.

I\'m a newbie to javascript, but have read for SEO, the code should not be added to the page itself but rather as an external file.

The reason for this is that when Google comes to the page, it doesn\'t have to load the code each time.

My question is if I take the code and put in in an external file (test.js), how do I call it from the html page?
Reply
Raja 13 years ago
you need to include the external JS file in Head tag like this

<script src="/JS/jQGridList.js" type="text/javascript"></script>
Reply
nate 13 years ago
This is VERY cool...
I'm trying to add this to my wordpress. how would i implement the code in to the loop?
forgive my nubie-ness
Reply
kevin Admin 15 years ago
Hi Kelly, yea, you should make it external to keep the html page clean. I did it in tutorial because it\'s easier to maintain and read.

Just open this page source\'s code, inside the head tag, you will able to see how I did that. :) cheers
Reply
designzzz Admin 15 years ago
hi designzzz: try to download the zip file copy, it has all the files you need. Make sure my version work in ur browser, and then modify it. :)
Reply
designzzz 15 years ago
Hiiz, its a very neat way for thumbnails. i tried it by carefully copy psting a few times and also by changing image names to the originals but it doesnt animate. im not sure why.
Reply