Lightbox 2.0 Web Photo Gallery

Due to popular demand, I have extended the Lightbox Web Photo Gallery tutorial with instructions on adapting it to work with Lightbox 2.0. Since this is a continuation, I highly suggest reading the original tutorial, otherwise you’ll probably be a bit lost.

Quick Guide

• Lightbox Web Photo Gallery original tutorial
• Lightbox 2.0 Web Photo Gallery example
• Photoshop Lightbox 2.0 Web Photo Gallery Preset
• Lightbox 2.0 Javascript website

Start by duplicating the “Simple” preset folder (or the “Lightbox” folder if you created one already) in your [Presets > Web Photo Gallery] folder. Rename the duplicated folder to “Lightbox 2.0″ and create a folder within that called “images”. Visit the Lightbox JS v2.0 website and download the necessary files. Drag the supporting Lightbox 2.0 images, stylesheets and javascript files (from your download) into the “images” folder.

Open the [Thumbnail.htm] file, located in the “Lightbox 2.0″ folder, in your favorite HTML or text editor. Set the anchor tag to:

• <a href="%IMAGEPAGE%" title="%CAPTIONTITLE%" rel="lightbox[gallery]">

Open the [lightbox.js] file, now located in the “images” folder. Find line (approximately) 331 where it says

• imageArray.push(new Array(imageLink.getAttribute(’href’), imageLink.getAttribute(’title’)));

And add/change that line to:

• imageLink.href = imageLink.getAttribute(’href’);
• imageLink.href = imageLink.href.replace("/pages/","/images/");
• imageLink.href = imageLink.href.replace(".html",".jpg");
• imageLink.href = imageLink.href.replace(".htm",".jpg");
• imageArray.push(new Array(imageLink.href, imageLink.getAttribute(’title’)));

Then find line (approximately) 343 where it says:

• if (anchor.getAttribute(’href’) && (anchor.getAttribute(’rel’) == imageLink.getAttribute(’rel’))){
•  imageArray.push(new Array(anchor.getAttribute(’href’), anchor.getAttribute(’title’)));
• }

And add/change to:

• if (anchor.getAttribute(’href’) && (anchor.getAttribute(’rel’) == imageLink.getAttribute(’rel’))){
•  anchor.href = anchor.getAttribute(’href’);
•  anchor.href = anchor.href.replace("/pages/","/images/");
•  anchor.href = anchor.href.replace(".html",".jpg");
•  anchor.href = anchor.href.replace(".htm",".jpg");
•  imageArray.push(new Array(anchor.href, anchor.getAttribute(’title’)));
• }

A little below that, you’ll want to find:

• while(imageArray[imageNum][0] != imageLink.getAttribute(’href’)) { imageNum++;}

And change it to:

• while(imageArray[imageNum][0] != imageLink.href) { imageNum++;}

Save your edited [javascript.js] file. Run your new Web Photo Gallery through Photoshop.