There's a very popular JavaScript out there called Lightbox JS 2.0. It's a great way to show off images and create impromptu photo galleries. The only problem is that it's heavy and dramatically degrades the performance of your website. Fortunately there's a fantastic 'clone' called Slimbox that utilizes the great mootools JavaScript library to produce the same effect but with far less JavaScript, and advanced loading techniques that subsequently produces faster loading and more responsive pages. Sporticus fully integrates the JavaScript and the CSS so all you have to do to utilize this technique is an an extra element to your image link.

Check out the demo below:

Add the rel="lightbox" attribute to the links pointing to your full-sized images. Use the optional title attribute if you want to show a caption:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> 

For sets of related images that you want to group and make navigable, add a group name to the rel attribute after ìlightboxî, for example inside square brackets:

<a href="images/image-1.jpg" rel="lightbox[colorado]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[colorado]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[colorado]">image #3</a> 

Alternatively, you can also launch the Lightbox effect using JavaScript to display a single image. Just call the following method, passing the URL of the image as first parameter and optionally a title as second parameter:

Lightbox.show('images/image-1.jpg', 'Spheres in construction');