FF1+ IE5+ Opr7+

Lightbox image viewer 2.1

Author: h Lokesh Dhakar | Homepage

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 Image Viewer 2.0 expands upon Lightbox Image Viewer with a few new features. While the original version is great for viewing images individually on the page, Lightbox 2.0 supports a new "grouping" feature that lets you group related images on the page for easy browsing amongst them. The transitional effect for bringing up an image also differs from the original. And like before, this script supports optional caption display, plus incremental preloading of the next image when images are grouped. Very nice!

Demo 1: (individual images):

(Note caption for "horse" is hyperlinked, v2.03a feature)

Demo 2: (grouped images set. After an image has enlarged, you can move between images by clicking on the right/left edges of the enlarged image):


Simply download Lightbox V2.1, and refer to the index file inside for installation instructions. If you're merely upgrading from v2.03x to v2.1, simply refresh the following file:

Installation instructions

Just for your reference, the installation instructions are repeated below.

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

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

Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library.

Step 2: Create your "thumbnail" image links, for example:

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

The rel attribute is mandatory in order to activate the effect for this particular image. The "title" attribute is optional, and when defined, adds a caption beneath the enlarged image. The "href" attribute obviously should contain the path to the enlarged image. If you wish a particular caption ("title") to be hyperlinked to a specific URL, throw in a "rev" attribute pointing to the desired URL. For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption" rev="http://www.dynamicdrive.com">image #1</a>

LightBox version 2 also adds the ability to group multiple image links together, so an image gallery is created out of the enlarged images:

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

As you can see, to group image links together, simply modify the "rel" attribute to be "lightbox[roadtrip]" instead, where "roadtrip" is an arbitrary but unique name for that group. You can have multiple groups of images on the same page- just use a unique group name in each case. Grouped images can be cycled through by clicking on the right/left edges of each enlarged image.

That's it! Enjoy this superb script. Remember, there's also LightBox V1 if you don't need the grouping feature and just want an elegant transition effect to bring up each image.


For your information, inside lightbox.js, there are a few configurable variables:

// Configuration
var fileLoadingImage = "images/loading.gif"; 
var fileBottomNavCloseImage = "images/closelabel.gif";
var resizeSpeed = 7; // controls the speed of the image resizing (1=slowest and 10=fastest)
var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable

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