Bookmark to del.icio.us
FF1+ IE5+ Opr7+
Lightbox image viewer
Description: Lightbox JS is an elegant, unobtrusive script that overlays a larger version of an image on the current page for display when clicked on- an image thumbnail viewer if you will. It's a snap to setup and works on all modern browsers.
Demo: (links are set to open in a popup window):
Step 1: Insert the below code in the HEAD section of your page:
Step 2: Create your "thumbnail" HTML code. Three basic flavours are supported:
As you can see, the thumbnail code just consists of a standard <A> tag with its "href" attribute set to the image to show, an extra attribute rel="lightbox" to separate this link from ordinary links, and finally, an optional "title" attribute that will show a caption if set. You're free to use either a thumbnail image or text link as the interface to launching the enlarged image.
Step 3: Last but certainly not least, this script is made up of a few external files/images, as referenced in the code of Step 1. Download lightbox.zip, and upload its contents to a folder on your site. Then make sure the paths used in the code of step 1 correctly points to this directory. FYI, lightbox.zip contains these files:
That's it! Enjoy this superb script.
Inside lightbox.js, there are two configurable variables:
var loadingImage = 'loading.gif'; //path to the "loading animation" image var closeButton = 'close.gif'; //path to the "close" button image