Leo Newball, Jr.

Lightbox is a great image overlay effect that can be used for standalone image effects, galleries. The script fades the site background to and displays the image over the website. Here’s an example below:

The most current version of Lightbox is Lightbox v2.04, but there is a Lightbox 1 which performs a similar task. The differences between the two versions is the use if the Prototype Framework and Scriptaculous Effects Library in version 2.

Using Lightbox

Using Lightbox is really simple but only works with images or text. It relies on the use of the rel tag in the <a> tag. Before using Lightbox, you must install it. To install lightbox (after downloading it and uploading the files to you web server), you must include its three javascript files to your header with the <script> tag.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


Next add the Lightbox CSS file by using the <link> tag or merge it with your current CSS file:

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

After installing and linking the necessary files to the pages you intend to use Lightbox with. This is done by adding the rel=”lightbox” attribute to your <a> tags. You can also use the title attribute to display a caption with your image. Here is how the code for the demo above looks like:

<a href="http://images.nexeusfatale.com/demo/lightbox-demo.jpg" rel="lightbox" title="Lightbox Demo Image"><img src="http://images.nexeusfatale.com/demo/thumb-lightbox-demo.jpg alt="Lightbox Demo" border="0" title="Lightbox Demo Image"/></a>

One option, if you are using a PHP generated page is to create a header file and use include() to have access to lightbox on every page.

Alternative Solutions

Lightbox is a really simple and easy way to add functionality to your designs. There are several alternatives to Lightbox that provide the same or expanded functionality and are more flexible with media (such as Flash objects or more dynamic photo galleries). Thickbox is a jQuery alternative, which works with single images and galleries, as well with AJAX, IFrame and Flash content.

Lightbox in WordPress

For those using WordPress implement Lightbox may present a bit of a challenge. There is however two plugin’s that you can use, the first is Giuseppe Argento’s implantation of Lightbox 2, which is merely a plug-in version of the Lightbox 2 code, I use this plugin on this website. There’s also Rupert Morris’s implementation of Lightbox 2 which is an updated code set that features some automatic features (i.e. automatic lightboxing of images, automatic titling, arrow key implementation) .