WEBINAR: On-demand Event
Replace Oracle with the NoSQL Engagement Database: Why and how leading companies are making the switch REGISTER >
First, here is an example of how the Lightbox works:
<a href="baby_full_belly.jpg" rel="lightbox" ><img src="baby_full_belly_thumb.jpg" /></a> <a href="punk_the_burmese.jpg" rel="lightbox" title="Baby the Albino Burmese Python"><img src="punk_the_burmese_thumb.jpg" /></a> <a href="goliath_and_me.jpg" rel="lightbox" title="Me and a Huge Snake" /></a>The code for the thumbnails is the same as you'd normally see, with the exception of the "rel=lightbox" attribute. The "title" attribute shows a caption, if it is used. You can see it if you mouse over the second image and the text link. Lokesh' script is pretty slick, as it enables you to use thumbnail images and text links, which is very handy.
If you've downloaded the script, you can check out the files it contains which are needed for the script to work. Once you've unzipped it, you'll need to upload them to your web server, and of course, be sure to change any paths within the script and/or CSS files to reflect any differences on your own server (i.e. where you have located the images, etc.).
The two configurable variables are located within the lightbox.js file, and look like this:
var loadingImage = 'loading.gif'; //path to the "loading animation" image var closeButton = 'close.gif'; //path to the "close" button imageAs you can see, adding the Lightbox effect to your pages is not difficult, and makes the display of images so much more professional. Have fun, and see you on the web!