Introduction
Long long time ago, my friend had written a jQuery tutorial about spotlight effect called - making a cool spotlight efect with jQuery, he got this inspiration from Sikker website that uses the similar effect for all his portfolios. I think that's cool, so I decided to spice thing up a little bit by adding a caption into it.
Just in case you're new here, Queness has been publishing practical jQuery tutorials that able to help you to build a more interactive website. Feel free to browse through my previous post, I'm pretty sure you will find something interesting. (if not, contact me and tell me what are you looking for) :)
This tutorial will guide you how to build a spotlight effect with caption. I have tried to keep it as simple as possible and I hope you will like it. This is how it will look like:
Let's start it with HTML
1. HTML
We will use divs instead of ul list here. I have tested it with UL before, and it will work perfectly fine, you just have to style is with CSS. The caption for the thumbnail will be obtained by jQuery from the anchor Title.
<div id="items"> <a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis."> <img data-src="dummy.gif" width="190" height="120"/> </a> <a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis."> <img data-src="dummy.gif" width="190" height="120"/> </a> <a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis."> <img data-src="dummy.gif" width="190" height="120"/> </a> <a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis."> <img data-src="dummy.gif" width="190" height="120"/> </a> </div> <div class="clear"></div>
2. CSS
CSS is pretty simple, if you're using different image size, you might need to adjust the position of caption. Also, we are using a little bit of CSS3 here, we're using drop shadow, so when you mouse over the item, you will able to see them in firefox, chrome and safari, maybe opera but definitely not internet explorer.
body { font-family:arial; margin-top:70px; } img {border:none;} #items a { text-decoration:none; color:#3deeee; } #items { width:786px; margin:0 auto; } #items .item { display:block; width:190px; height:120px; border:2px solid #666; float:left; position:relative; } #items .item .caption { position:absolute; top:80px; left:2px; padding:3px; font-size:10px; width:180px; display:none; background:#000; } .clear { clear:both; } .effect { /* CSS3 shadow */ box-shadow: 0 0 10px #444; -moz-box-shadow: 0 0 10px #444; -webkit-box-shadow: 0 0 10px #444; }
3. Javascript
ALright, here we come to the script that makes everything alive. The way it works is really simple, when we mouse over the item inside the #items, it will set the opacity of the siblings of the item to 0.1, add drop shadow effect and then display the caption. If the user left the #items block, everything is reset back to default
$(document).ready(function () {
//loop through all the children in #items
//save title value to a span and then remove the value of the title to avoid tooltips
$('#items .item').each(function () {
title = $(this).attr('title');
$(this).append('
');
$(this).attr('title','');
});
$('#items .item').hover(
function () {
//set the opacity of all siblings
$(this).siblings().css({'opacity': '0.1'});
//set the opacity of current item to full, and add the effect class
$(this).css({'opacity': '1.0'}).addClass('effect');
//show the caption
$(this).children('.caption').show();
},
function () {
//hide the caption
$(this).children('.caption').hide();
}
);
$('#items').mouseleave(function () {
//reset all the opacity to full and remove effect class
$(this).children().fadeTo('100', '1.0').removeClass('effect');
});
});
Conclusion
This is a fairly simple tutorial and I think it's a good way to display your folio just like what we have seen on Sikker website. Do let me know if you have any questions or problems during the implementation. :) Please help me to spread this tutorial to your friends by sharing it via digg, twitter or social bookmarking tool. 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.Brilliant works,I think its very useful for me.. thanks
visit : news.ewebtutorial.com
I need to separate each item, I tried adding in the css #items .item { margin: 20px; }.
The separation is perfect! But I think there is a bug when the mouse leaves the images. The spotlight effect works good in IE but don’t in Google Chrome and Firefox.
Thank you