Some of you might notice the overlay and shadow effects when you click on the thumbnails in my blog.

Wondering how I did that? It is fairly simple, all you need is a script call Lightbox JS installed.

So what is Lightbox JS?

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

You can see some examples in my blog history and my first site job, or for the lazy ones, click on the thumbnails below.

So how to install and use it?

To set up:
Include lightbox.js in your header.

Eg:
< script type="text/javascript" src="lightbox.js">

To use it:
Add rel=”lightbox” attribute to any link tag to activate the lightbox.

Eg:
1. For single image
< a href="images url here" rel=”lightbox” title=”your caption”>image #1

2. For images in sequence
< a href="images url here" rel=”lightbox”{groupname} title=”your caption”>image #1

That’s it, simple as ABC.

For further information, please go to Lokesh Dhakar ’s Lightbox 2