New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Lightbox image viewer 2.03a

Base Version details: v2.03 (Added April 13th, 07')
Updated Nov 29th, 07': To v2.03a by DD, which adds ability for a caption to be hyperlinked. Only "lightbox.js" changed from base version!

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

(Note caption for "horse" is hyperlinked, v2.03a feature)

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


Directions:

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:

Installation instructions

Just for your reference, the installation instructions are repeated below.

Step 1: Insert the below code in the HEAD section of your page:

<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library.

Step 2: Create your "thumbnail" image links, for example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

The rel attribute is mandatory in order to activate the effect for this particular image. The "title" attribute is optional, and when defined, adds a caption beneath the enlarged image. The "href" attribute obviously should contain the path to the enlarged image. If you wish a particular caption ("title") to 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>

LightBox version 2 also adds the ability to group multiple image links together, so an image gallery is created out of the enlarged images:

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

As you can see, to group image links together, simply modify the "rel" attribute to be "lightbox[roadtrip]" instead, where "roadtrip" is an arbitrary but unique name for that group. You can have multiple groups of images on the same page- just use a unique group name in each case. Grouped images can be cycled through by clicking on the right/left edges of each enlarged image.

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.

Notes

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