I’ve been using the awesome Lightbox 2 JavaScript by Lokesh Dhakar to build a quick photo viewer but was running into a problem. There are two configuration options:

var fileLoadingImage = "/path/to/loading.gif"; var fileBottomNavCloseImage = "/path/to/closelabel.gif";

that are required to specify the location of the loading and close images respectively. My problem is that I want to use fancy URLS for the links with an ‘unknown’ depth, and I don’t want to reference the path from the web root so that I can install it multiple times, wherever I want, and have it just work. Digging into the code a little further, I make a few modifications to allow you two set the images using CSS only, rather than edits to the JavaScript. If you want to do the same, around line 270 just comment out:

//var objLoadingImage = document.createElement("img"); //objLoadingImage.setAttribute('src', fileLoadingImage); //objLoadingLink.appendChild(objLoadingImage);

and around line 306 comment out:

//var objBottomNavCloseImage = document.createElement("img"); //objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage); //objBottomNavCloseLink.appendChild(objBottomNavCloseImage);

then in the CSS file add:

#bottomNavClose { display:block; background: url(i/closelabel.gif) no-repeat; width:66px; height:22px; }

loadingLink {

display:block; background: url(i/loading.gif) no-repeat; width:32px; height:32px; }

Make sure the url()s are relative to your stylesheet. In my case all the images are located in an ‘i’ directory along with the style sheet.

Now the images are specified with the CSS and you need not edit the JavaScript. I’m sure this will be done in an upcoming version as the Next and Previous buttons are already set up this way.