Lightbox

I have been spending the last couple of days re-writing our lightbox script. Our original lightbox script simply opened the selected photo, and closed it again with a click. Since then, the script has been heavily modified with numerous hacks to add a whole range of new functionality. It all works, but the script has become extremely messy, so I decided to re-write it completely. This would provide us with a clean script, and allow me to add a couple of new features as well.

Feature List

• Photos can be grouped together into galleries, with next and previous buttons to navigate through them.
• Multiple galleries can be added to a single page.
• Very simple to use: the script is very versatile, but if the standard settings are used, it is completely controlled through the standard anchor tags.
• The script initialises with standard settings simply by adding the <script> tag, but a settings variable can be set to override the default settings if required.
• The script loads on DOM load if possible, rather than waiting for the onload event to fire.
• Support for four types of media:
  • Image: standard photos.
  • Video: FLV movies played using our Flash Movie Player
  • Audio: MP3 files played through our Flash MP3 Player
  • Embed: any embedded code, which allows you to embed YouTube movies, or anything else you desire. You can also write your own embed code, to do just about anything you like.
• Animation – when the lightbox transitions between on old and new photo, the transition is animated, so the container resizes itself, the old photo fades out and the new photo fades in.

Using the Script

To use the script, simply include the script on the page with a standard script tag. Some of the functions I’ve used are included in other script files (eg: common functions), so we have to include those as well. If we need to change the default settings, add another script tag with the new settings. Then for each link that should open in a lightbox, use the following attributes:

• Href: the path to the file to be opened.
• Rel: must start with the string ‘lightbox’. If you want this item to be part of a gallery, use ‘lightbox_galleryname’
• Rev: optional, indicates what type of media you wish to use. Can be ‘image’, ’video’, ’audio’ or ‘embed’. The default is ‘image’.
• Caption: this non-standard attribute is used to add a caption to the lightbox. The caption can be fully formatted HTML code. Don’t forget to escape the code so it doesn’t break the HTML or javascript.
• Vcode: this non-standard attribute contains the embed code for the embed media type.
• Title: this is used for more simple captions, and is used as the caption if the caption attribute is not present. The browsers will attempt to display this title on the link itself as a tooltip, so you should not use fully formatted HTML code in a title caption.

XHTML Compliance

To cater for xhtml compliance, the title can also be used to pass a complete set of settings, including the contents of the non-standard attributes. To do this, simply create a javascript object string with the names and values of all your variables. If the object includes a title variable, the title attribute will contain this new title; otherwise the object string will be removed. The caption will be made up of all the variables in the object, except the system variables (title,width,height,vcode).

Example:

<a href=”path/to/my/file.jpg” rel=”lightbox_gallery1” rev=”image” title=”{title:’my file’,artist:’my artist’,price:’R250 each’}”>link</a>

The script is not quite ready yet. I am still working on ways to make the animation work properly on all the browsers. When I have the whole thing finished completely, I will post a more technical description of how it works, and I’ll include the script as well, so you can use it, abuse it, and let me know how to improve it.