Introduction
Hi all, today we are going to learn to create another thumbnail effect with fading and transparent caption. It's simple and obviously I have running out of ideas in jQuery tutorial because this is similar to jQuery Thumbnail with Zooming Image and Fading caption. If you have any suggestion about tutorial, please contact me
Before we begin, I have already made different effect for thumbnail, you can check it out:1. HTML
First of all, HTML. it's easy to understand, all your caption/description of the thumbnail should put inside the caption class.
<div class="item"> <a href="#"><img data-src="image.gif" alt="title" title="" width="125" height="125"/></a> <div class="caption"> <a href="">Title</a> <p>Description</p> </div> </div>
2. CSS
I have put comment on each important CSS. However, if you want to learn more about CSS, you can visit my following posts:
body { font-family:arial; } .item { 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; } .item .caption { width:125px; height:125px; background:#000; color:#fff; font-weight:bold; /* fix it at the bottom */ position:absolute; left:0; /* hide it by default */ display:none; /* opacity setting */ filter:alpha(opacity=80); /* ie */ -moz-opacity:0.8; /* old mozilla browser like netscape */ -khtml-opacity: 0.8; /* for really really old safari */ opacity: 0.8; /* css standard, currently it works in most modern browsers like firefox, */ } .item .caption a { text-decoration:none; color:#0cc7dd; font-size:16px; /* add spacing and make the whole row clickable*/ padding:5px; display:block; } .item .caption p { padding:5px; margin:0; font-size:10px; } img { border:0; /* allow javascript moves the img position*/ position:absolute; } .clear { clear:both; }
3. Javascript
I have declared two variables called move and zoom. Move variable is for the top and left value of the thumbnail, if you mouse over the image, the image will move according to the value you have set (i make it move to left, so after the zooming, it'll always display in center). And for the second variable - zoom, it's the value you need to set if you want to enable the zooming effect. Currently, it's set to 1.2 which will enlarge the image to 120%. Simple, and for the rest of the code I have added comments above it. If you have any question, please drop me a comment.
$(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 $('.item').hover(function() { //Set the width and height according to the zoom percentage width = $('.item').width() * zoom; height = $('.item').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':$('.item').width(), 'height':$('.item').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, bookmark it and help me to spread this tutorial to our friends! :) Thanks!
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.Thank You so much buddy. It simply works fine.
I have one question. I am using this in my gallery and it contains 100s of images. How can I implement a pagination on it?
http://www.jquery4u.com/plugins/10-jquery-pagination-plugins/
something like this
.item .caption a {
width:125px;
height:125px;
position:absolute;
left:0;
top:0;
z-index:1000;
text-indent:-999em;
}
preview: http://www.goodbye-moderation.com/secret/selected.html
?
The image get bigger and bigger wen i get over the image en the caption get under the image...
Help whats's the solution?
Secondly, hope you can help me fixing this problem. I use this with quicksand, at first it worked just fine, but ever since I click on one of the filter tag to filter the images, it stops working, nothing happen when I hover over. Is there any way can I get this to work with quicksand or other jquery?
Thanks very much man.
Thanks for the work
Miko
Please fix it to .item img{...