Home
Photoshop
Photoshop Basics
Lightbox 2.0 Web Photo Gallery
Level: All levels Software:
Photoshop
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.
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.
More Photoshop: Most Popular Materials | Fresh Materials
| TutorialKit New Photoshop Tutorials