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:
<a href="dog.jpg" rel="lightbox" ><img src="dog_thumb.jpg" /></a>
<a href="cat.jpg" rel="lightbox" title="Caption- cute cat!"><img src="cat_thumb.jpg" /></a>
<a href="dan.jpg" rel="lightbox" title="My best friend Dan">Dan</a>
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:
- lightbox.js - the main script.
- lightbox.css - basic style and tricky PNG support.
- overlay.png - 80% opacity, black tile used to create shadow.
- loading.gif - mock status bar used in examples above.
- close.gif - 'X' graphic placed in top-right corner.
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