jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

lightBox is a plugin for jQuery. It was inspired in Lightbox JS by Lokesh Dhakar.

The better way to know what is jQuery lightBox plugin, click the Example tab above and see it in action.

Parte 1 - Setup

jQuery lightBox plugin uses the jQuery JavaScript library, only. So, include just these two javascript files in your header.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

Include the CSS file responsible to style the jQuery lightBox plugin.

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

Part 2 - Activate

You don´t need to modify your HTML markup to use jQuery lightBox plugin. Just use the power and flexibility of jQuery´s selector and create a set of related images.

The only necessity is to have a HTML markup likes it:

<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

After it, select the links and call the jQuery lightBox plugin. See some examples:

<script type="text/javascript">
$(function() {
 // Use this example, or...
 $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
 // This, or...
 $('#gallery a').lightBox(); // Select all links in object with gallery ID
 // This, or...
 $('a.lightbox').lightBox(); // Select all links with lightbox class
 // This, or...
 $('a').lightBox(); // Select all links in the page
 // ... The possibility are many. Use your creative or choose one in the examples above
});
</script>