Lightbox 2
Author: Lokesh Dhakar
Description: Lightbox 2 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.

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

## Examples

### Single image

### Image set

## Download

Lightbox
v2.51

- Includes:
- index.html
- js/jquery-1.7.2.min.js
- js/lightbox.js
- css/lightbox.css
- images/close.png
- images/loading.gif
- images/next.png
- images/prev.png
- Plus a few files for the demo page

Lightbox2 is open-source.
Fork the code on Github.

### Changelog

- v2.51 - 4/20/12 - IE Fix: removed stray console.log statements. :-/
- v2.5 - 4/10/12 - Switch to jQuery. Code put in Github. Compiling with Coffeescript and SASS.
- v2.05 - 3/18/11 - Upgraded Prototype (now works in IE9) and Scriptaculous. Minor bug fixes.
- v2.04 - 3/9/08
  - NEW - Upgraded Prototype from v1.4 to v1.6.0.2
  - NEW - Moved label text into configuration for easier localization
  - UPDATED - Code cleaned up. Respect for the global namespace and native javascript objects.
  - FIXED - Caption displays as "null" when viewing an uncaptioned image after viewing a captioned image.
  - FIXED - Clicking 'close' button shifts layout as link focus' dotted line appears.
- v2.03.3 - 5/21/07 - Support for horizontally scrolling pages. Added updateImageList method for ajax'y pages.
- v2.03.2 - 4/30/07 - Fixed animated gif support in IE/Opera.
- v2.03.1 - 4/18/07 - Fixed embed hiding. Overlay opacity var added to config. Image sets w/Imagemaps fix. Clearfix removed.
- v2.03 - 4/10/07 - Improved keyboard navigation. Animation off toggle. Hides Flash movies under overlay. Imagemap support. Valid CSS.
- v2.02 - Fixed layout issues caused by multiline captions. Added keyboard navigation.
- v2.01 - Centering in IE6 (any DOCTYPE) fixed. Smoothed out resize transition.

Show older changes

## How to use

### Part 1 - Setup

1. Lightbox 2 uses the jQuery framework. Load jQuery and the Lightbox javascript files in the proper order.

       <script src="js/jquery-1.7.2.min.js"></script>
       <script src="js/lightbox.js"></script>

2. Include the Lightbox CSS file.

       <link href="css/lightbox.css" rel="stylesheet" />

3. Check the CSS and make sure the referenced `prev.png` and `next.png` files are in the right location. Also, make sure the `loading.gif` and `close.png` files as referenced near the top of the `lightbox.js` file are in the right location.

### Part 2 - Activate

1. Add a `rel="lightbox"` attribute to any link tag to activate Lightbox.

       <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.
2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute.

       <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>

   No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

## Support

For personal support issues and feature requests please post a message in the forums. I do not have time to personally respond to support emails, please use the forum. Thanks!

For bug reports, send a note with the browser you are using and the version of Lightbox to lokesh.dhakar@[ google's email service ].com.

Lightbox
Forums

## Donate

Lightbox is completely free to use. If you're using Lightbox on a commercial project and feeling generous, consider a donation. All donations are sincerely appreciated. Thanks!

### Find me elsewhere

Twitter Blog