Lightbox JS v2.0.2+ (WebsiteBaker version)

by Lokesh Dhakar

This is an adapted Lightbox 2.0.2 installation, downloaded on 14-04-2006. I (Bas) integrated the following modifications that I found in the comments on the Lightbox JS v2.0 blog entry. These are:

• Auto resize of images larger than browser size, by Turk
• Keyboard navigation by means of arrows, spacebar and backspace, by Roel Krotte
• Fix that prevents images (in FF) from displaying dotted lines around them when clicked, by Roel Krotte

• Added 'Mail-a-Friend' link. To remove this, check lightbox.js and search for comments with "//Added by Guido Diepen" and for the term 'mailafriend' in general. All modifications should be documented. :-)
• Changed position of forward and back arrows. Check the CSS file to change this.
• There might be some more things that I've changed, don't know precisely anymore!

P.S. I take no credit for any of the fixes/hacks/modifications, they all go their respective authors and most of all to Lokesh of course. I am just a JS n00b trying to make sense of it all and in the meanwhile making life easier for a few people. :-) In case your wondering which lines were changed, look for my name 'Bas' in the code. (A couple of lines in lightbox.js and just 1 line in lightbox.css were changed.) Also, I take no responsibility bla bla... You know the drill! ;-)
Oh, b.t.w., in case you need to contact me, drop me a line at lightbox@baZzz.com.

Examples

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!