FF1+ IE5+ Opr7+

Lightbox image viewer

Aug 17th, 15': Updated script by DD to be responsive- images now shrink to fit inside small screen devices where the screen is smaller than the dimensions of the image. Only lightbox.js changed.

Description: Lightbox JS is an elegant, unobtrusive script that overlays a larger version of an image on the current page for display when clicked on- an image thumbnail viewer if you will. It's a snap to setup and works on all modern browsers.

Demo: (links are set to open in a popup window):

 Haunting trees Ocean View

Nice mountain view


Step 1: Insert the below code in the HEAD section of your page:

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

Step 2: Create your "thumbnail" HTML code. Three basic flavours are supported:

<a href="dog.jpg" rel="lightbox" ><img src="dog_thumb.jpg" /></a>
<a href="cat.jpg" rel="lightbox" title="Caption- cute cat!"><img src="cat_thumb.jpg" /></a>
<a href="dan.jpg" rel="lightbox" title="My best friend Dan">Dan</a>

As you can see, the thumbnail code just consists of a standard <A> tag with its "href" attribute set to the image to show, an extra attribute rel="lightbox" to separate this link from ordinary links, and finally, an optional "title" attribute that will show a caption if set. You're free to use either a thumbnail image or text link as the interface to launching the enlarged image.

Step 3: Last but certainly not least, this script is made up of a few external files/images, as referenced in the code of Step 1. Download lightbox.zip, and upload its contents to a folder on your site. Then make sure the paths used in the code of step 1 correctly points to this directory. FYI, lightbox.zip contains these files:

That's it! Enjoy this superb script.


Inside lightbox.js, there are two configurable variables:

var loadingImage = 'loading.gif'; //path to the "loading animation" image
var closeButton = 'close.gif'; //path to the "close" button image

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post