Bookmark to del.icio.us
FF1+ IE5+ Opr7+
Lightbox image viewer 2.03a
Base Version details: v2.03 (Added April 13th, 07')
Description: Lightbox Image Viewer 2.0 expands upon Lightbox Image Viewer with a few new features. While the original version is great for viewing images individually on the page, Lightbox 2.0 supports a new "grouping" feature that lets you group related images on the page for easy browsing amongst them. The transitional effect for bringing up an image also differs from the original. And like before, this script supports optional caption display, plus incremental preloading of the next image when images are grouped. Very nice!
Demo 1: (individual images):
Demo 2: (grouped images set. After an image has enlarged, you can move between images by clicking on the right/left edges of the enlarged image):
Simply download Lightbox V2.03a, and refer to the index file inside for installation instructions. If you're merely upgrading from v2.03 to v2.03a, simply refresh the following file:
Just for your reference, the installation instructions are repeated below.
Step 1: Insert the below code in the HEAD section of your page:
Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library.
Step 2: Create your "thumbnail" image links, for example:
LightBox version 2 also adds the ability to group multiple image links together, so an image gallery is created out of the enlarged images:
As you can see, to group image links together, simply modify the "rel"
attribute to be "
That's it! Enjoy this superb script. Remember, there's also LightBox V1 if you don't need the grouping feature and just want an elegant transition effect to bring up each image.
For your information, inside lightbox.js, there are a few configurable variables:
// Configuration // var fileLoadingImage = "images/loading.gif"; var fileBottomNavCloseImage = "images/closelabel.gif"; var resizeSpeed = 7; // controls the speed of the image resizing (1=slowest and 10=fastest) var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable