Another Lightbox Image Viewer Example (a.l.i.v.e)

In Brief

As the title suggests, this is simply another reincarnation of the popular 'lightbox' effect - allowing you to enlarge and scale (down) images to fit the current window size.

Of course, there are plenty of other variations about the Internet, but I thought I'd have a go at creating my own variation and see if I could learn anything in the process - which I have done.

Example

Below are some examples of the lightbox when initialising the script via thumbnail images. The first two images are independent (non-grouped) and the last three are grouped together.

Usage

The lightbox should be fairly easy to implement if you ever wish to use it.

Simply include lightbox.js in your page (preferably the header)

Then for each link used to initialise the lightbox, add class="lightbox".

If you require a caption or description for an image, just add in a title attribute.

To enable image grouping (Previous / Next), add rel="your_group_name" to each image within the group.

Library

Below are the files required to implement the lightbox.

• lightbox.js (The javascript file)
• lightbox.css (Custom / additional lightbox styles)
• lightbox-bg.png (Semi-transparent black png image for main background)
• lightbox-loading.gif (Animated circular loading gif image)
• lightbox-close.png (Icon to close the lightbox)
• lightbox-footer-bg.png (Semi-transparent white png image for caption background)
• lightbox-prev.png (Icon to skip to previous image in group)
• lightbox-next.png (Icon to skip to next image in group)

Compatibility

I've managed to get some testing done, so can reveal that the lightbox - when correctly implemented - works in IE6, IE7, FF2, Opera 9.2, FF 1.5 (Mac).

What Now?

Feel free to add this script to your site, if you do implement it give me a shout as i'd like to see it in use!

Also, If (or rather when!) you come accross any bugs please let me know ( - somehow!?).

Version History

• V1.2 - Added image grouping ability (2007-02-19).
• V1.1 - Added a close icon and ability to integrate captions for each image (2007-02-17).
• V1.0 - Released the first version of my lightbox (2007-02-15).