Simplest jQuery Spotlight Effect Tutorial

Written by Kevin Liew on 26 May 2010
82,511 Views • Tutorials

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:

Simplest jQuery Spotlight Effect Tutorial

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('' + title + '');	
			$(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!

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.

9 comments
Jordan Walker 14 years ago
This is a great user interface for a portfolio or gallery page.
Reply
Rohit 14 years ago
Nice Tutorials,
Brilliant works,I think its very useful for me.. thanks
visit : news.ewebtutorial.com
Reply
Lynn 14 years ago
Good tutorial! It's very helpful!
Reply
chiwunduro 14 years ago
great stuff.
Reply
agon 14 years ago
nice tutorial easy to understand...thanks for sharing
Reply
kevin Admin 14 years ago
@aaa, you can either put it inside head or after body. I put it inside head, you can check it in the demonstration. But nowadays, the best way to put it is after the body so the browser able to render the page layout then load the js.
Reply
aaa 14 years ago
Hi. I'm just a beginner in learning javascript. Can I ask something? It is put between the head or body? thanks
Reply
Alex 13 years ago
Great Tutorial, very useful!
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
Reply
Suby 13 years ago
Hey can this be used with a vertical sliding content website? When i applied this showcase the vertical sliding stopped working and my navigation acts like a normal link.
Reply