Lightbox is an image display method developed by Lokesh Dhakar. It is designed as an alternative to using pop-up windows for displaying images. The lightbox method uses a veil to hide the page contents and then overlays the image on top of the page. View the demo to get a sense of how it works.

Download the zip file containing the scripts and support files. The version hosted here is 2.04. Please check the author’s site for the most current version.

The download file contains:

You will need to upload all the files in the /css and /js folders to your site. You can change the destination folders to those already on your site if you wish, but if you do, make a note of the folder name(s) you use as this will be needed to configure your SiteSpinner page. The /image folder contains files required for execution and for the example index.html file. Of the image files, you need to upload: closelabel.gif, loading.gif, nextlabel.gif, and prevlabel.gif. The lightbox.js script file expects to find the images it needs in the /images folder. If you decide to upload these files into the standard SiteSpinner /image file or another folder of your choice, you will need to edit the lightbox.js file and change the image path to your destination folder.

If you want to preview the page, be sure to copy the script, CSS, and image files into your preview folder using the same folder structure as you would on your site.

Usage

In a custom header, enter the following:

Make sure the lines specifying the script files are entered exactly in the order shown. Each script builds upon the previous file, so if they are loaded out of order, errors will occur and the lightbox will not work. If you do not use the default folder names for the uploaded files, be sure to modify the path names so the files can be located on your site.

The lightbox works from a link. This can be either an image link or a text link as shown in the demo. Using the Link Editor, or the Object/Quick Edit Link tab, select the “[ file ]“ Link Type and then use the “Find File” button to locate the image associated with this link. Then in the Code field, enter:

rel="lightbox"

If you want a caption displayed with the  image, enter your desired text in the “Assign a Title” field. For example:

You can construct a manual slideshow from your images by using the grouping method when specifying your lightbox images. The syntax for this is:

rel="lightbox[my-group]"

where my-group is any name you wish to use, but it must be the same name for all images to be used in the slideshow. In the example above, you can see I have a slideshow using images placed in “grp2″. You can have multiple groups of different images to create multiple slideshows by using different group names.

SiteSpinner Gotchas

While using the lightbox with SiteSpinner is fairly easy, there are a few things you must keep in mind. The primary item is that SiteSpinner will not output anything in the Code field of a link unless that object is a link; i.e., just adding the rel=”lightbox” statement by itself will not enable the lightbox to work. The object must also be a link.

You should not use the “Pop-up full-sized image” option on an image link. This will cause both the lightbox effect and pop-up window to appear.

Images used in a lightbox slideshow  are displayed in the order they are added to a page; i.e., their z-order. If you re-position images on your work page, be sure they are displayed in the correct sequence by using the “To Front” and “To Back” buttons.

SiteSpinner will only include the link’s title attribute if you enter something in that field. If you use the field on one image for a lightbox caption and do not use it on another image, the title value for the previous image will be used for the missing title caption. This will result in erroneous captions being displayed. If you decide to use lightbox captions and do not want to caption all of your images, you should still enter a blank title using the keyboard spacebar.