Lightbox JS v2.0 | Test Page

# Lightbox JS v2.03

by Lokesh Dhakar

## Example

## How to Use:

### Part 1 - Setup

1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

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

2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

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

3. Check the CSS and make sure the referenced `prevlabel.gif` and `nextlabel.gif` files are in the right location. Also, make sure the `loading.gif` and `closelabel.gif` 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 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.
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. For example:

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

## Lightbox JS v2.03a

Version 2.03a, the version on Dynamic Drive, adds the ability to have a caption ("title") hyperlinked if you wish. To have particular caption ("`title`") 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>`