Lightbox JS

Overview

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

Note: An new version of this script is available: Lightbox JS v2.0

Example

To make sense of it all, check out these examples. Click on a thumbnail or text link below:

left to right: Lokesh, Jess, Brian, and Steph

image #1

image #2 w/caption

Benefits

Places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths.

Keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity (and no fun!).

How to Use:

Include lightbox.js in your header.

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

Add rel="lightbox" attribute to any link tag to activate the lightbox. For example:
```
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
```
Optional: Use the title attribute if you want to show a caption.

Customizing:

You can use CSS to style the image container. Here is the code used in the examples above:

#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; } 
#overlay img{ border: none; }

To create the 'shadow' effect over the page, you'll need to use a PNG file and some extra CSS. The CSS is a bit messy thanks to IE's unorthodox support of PNG transparency:

#overlay{ background-image: url(overlay.png); }

* html #overlay{
	background-color: #000;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
	}

If you would like to show the user a 'loading' graphic, like the animated progress bar in the examples above, specify its location at the top of the lightbox.js file.
```
var loadingImage = 'loading.gif';
```
In the same vein, if you would like to use a 'close button', like the 'X' graphic in the examples above, specify its location at the top of the lightbox.js file.
```
var closeButton = 'close.gif';	
```

Download:

lightbox.js - the important stuff
lightbox.css - basic style and tricky PNG support
overlay.png - 80% opacity, black tile used to create shadow
loading.gif - mock status bar used in examples above
close.gif - 'X' graphic placed in top-right corner

Changelog:

1/19/06 10:40PM EST - Added keypress activated closing.
1/15/06 12:50PM EST - Added optional 'close' button.
1/10/06 10:30PM EST - Added support for captions.
12/31/05 6:00PM EST - Fixed IE6 bugs.

Modifications:

Lightbox Gone Wild - allows non-image content w/AJAX calls - by Chris Campbell
Leightbox - allows non-image content w/inline Divs - by Simon de Haan
Greased Lightbox - by Joe Lencioni based on the work of Gavin Montague
Wordpress Plugin - by Safirul Alredha
Drupal Module - by Mark Ashmead
Flashlightbox - allows you to call the script from within a Flash file - by Kelli Shaver
Flashlightbox v2 - updated with bug fixes and caption support - by Jeff Garczewski

Troubleshooting:

It doesn't work at all. The image opens up in a new window.: This is commonly caused by a conflict between JS scripts. Check your body tag and look for an onload attribute. Example:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
It doesn't work if I click an image before the page has finished loading.: This is not a bug, but a side-effect of unobtrusive scripts of this kind.
Flash objects appear through overlay.: Refer to comment by netasceta.
Script doesn't work with imagemaps.: Refer to comment by Jason Buechler.
Can I call the script from within a frame/iframe and still have it display on top of the entire page?: Refer to comment by Sean K. Some people have noted trouble implementing this modification. Proceed with caution, and if you can clear up the instructions it would be appreciated.
The shadow overlay doesn't stretch to cover full browser window.: Remove the default margin and padding from the body tag. Add body{ margin: 0; padding: 0; } to your stylesheet.
The shadow overlay doesn't show up in IE.: Find the filter: progid:DXI… line that you added to your stylesheet. There is a reference to the overlay.png in this line. Make sure that it is set relative to the current webpage, not relative to the CSS file.

Contact:

If you are having problems with the script, please check the forum for help.. Thanks.

Lightbox JS by Lokesh Dhakar