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


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


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:

  1. Include lightbox.js in your header.
    <script type="text/javascript" src="lightbox.js"></script>
  2. 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.


  1. You can use CSS to style the image container. Here is the code used in the examples above:
    	padding: 10px;
    	border-bottom: 2px solid #666;
    	border-right: 2px solid #666;
    	font-size: 0.8em;
    	padding-top: 0.4em;
    #lightboxCaption{ float: left; }
    #keyboardMsg{ float: right; }
    #lightbox img{ border: none; } 
    #overlay img{ border: none; }
  2. 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");
  3. 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';
  4. 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';	



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.



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.


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

back to top