Lightbox Web Photo Gallery
Here's an example of a Photoshop Lightbox Web Photo Gallery.
Photoshop's Web Photo Gallery automation is located under File > Automate > Web Photo Gallery.... It's been available since version 5.5 (I think). This tutorial doesn't cover the basics of using the Web Photo Gallery, but Adobe offers one in their Resource Center. So, if you've never used it, check that out first.
Since this isn't JUST a Photoshop tutorial I'm expecting a few different levels of readers:
- Non-Programmers For those of you that don't want to do any programming you can download the Lightbox Web Photo Gallery preset and install it into your Photoshop CS2/Presets/Web Photo Gallery folder. There's a text file called "Color Settings.txt" in the "images" folder of the download containing the matching color setting values I used in my example.
- L33T Programmers You can probably just skip to the Lightbox JS Editing instructions and figure things out yourself. I'm just hoping this sparks your creativity and you create some awesome galleries.
Start by navigating to your "Presets" folder in your Photoshop CS2 install directory.
Windows: Program Files/Adobe/Photoshop CS2/Presets/Web Photo Gallery.
Mac OS: Adobe Photoshop CS2/Presets/Web Photo Gallery.
Find the folder labeled "Simple" and duplicate it. Rename your duplicate folder to "Lightbox" (or whatever you want to call it). Within your new folder create another new folder and call it "images".
Visit the Lightbox JS website or even the newer Lightbox JS v2.0 website and download the necessary Lightbox files to the "images" folder you created earlier. For this example, I will be using the original Lightbox v1.0 files because it's an easier setup and install. Although, I must admit, the 2.0 version is very slick.
The Photoshop Web Photo Gallery uses custom tags to generate the content for the pages in the Web Photo Gallery. The tags are defined with surrounding "%" signs, which Adobe calls "tokens". For a list of all available tokens, you can search in your Photoshop Help documents by pressing F1, or you can download the list of available Web Photo Gallery Tokens here. This is a good guide for all of the token functions available.
These next few images will illustrate the options in the Web Photo Gallery and (some of) their corresponding tokens.
- Email address: %EMAIL%
- Character set: %CHARSET%
- Image width / Image height: %image_width% / %image_height%
- Site Name: %BANNER%, %TITLE%
- Photographer: %PHOTOGRAPHER%
- Contact Info: %CONTACTINFO%
- Date: %DATE%
- Font: %BANNERFONT%
- Font Size: %BANNERFONTSIZE%
Large Image Options
- Add Numeric Links: %ANCHOR%, %NUMERICLINKS%
- Border Size: %IMAGEBORDER%
- Titles: %FILENAME%, %FILEINFO%, %CREDITS%, %CAPTIONTITLE%, %COPYRIGHT%
- Font: %CAPTIONFONT%
- Font Size: %CAPTIONFONTSIZE%
- Size: %THUMBNAIL_WIDTH%, %THUMBNAIL_HEIGHT%
- Columns and Rows: %THUMBNAILSROWS%
- Border Size: %THUMBBORDER%
- Titles: %ALT%,%FILENAME%, %FILEINFO%, %CREDITS%, %CAPTIONTITLE%, %COPYRIGHT%
- Font: %CAPTIONFONT%
- Font Size: %CAPTIONFONTSIZE%
Custom Color Options
- Background: %BGCOLOR%
- Text: %TEXT%
- Link: %LINK%
- Banner: %BANNERCOLOR%
- Active Link: %ALINK%
- Visited Link: %VLINK%
With all of the tokens and their corresponding settings known you can start programming the Web Gallery files. I like to start with my own fresh HTML document. Adobe doesn't pay much attention to web standards.
Then enter the Web Photo Gallery tokens you want use, some custom styles and link any supporting files in the <head> content. I'm using an external stylesheet, but any Photoshop tags you want to use in CSS have to be placed inline, as you can see.
Then enter the body tags and tokens and save the file as IndexPage.htm in the "Lightbox" folder, overwriting the original file.
Locate the file Thumbnail.htm in the "Lightbox" folder and open it in an HTML editor.
The Thumbnail.htm file should have the following code in the anchor <a> tag to work with Lightbox JS:
|<a href="/img_articles/9247/%IMAGEPAGE%" title="%CAPTIONTITLE%" rel="lightbox">|
So that it should look something similar to this:
Next, open the Caption.htm and SubPage.htm files and delete ALL of their contents. Both files should be blank.
Modifying the Lightbox JS File
The next step is to open up the lightbox.js file that you downloaded to your "images" folder.
Navigate to around lines 37-38 of the file and change the loadingImage and closeButton variables to include images/.
Navigate to around line number 240 and add the following:
- objLink.href = objLink.href.replace("/pages/","/images/");
- objLink.href = objLink.href.replace(".html",".jpg");
- objLink.href = objLink.href.replace(".htm",".jpg");
Above the line:
- imgPreload.src = objLink.href;
It should look similar to this:
Save your updated lightbox.js file.
This code is replacing the links to the .html subpages that Photoshop automatically creates with links to the full-size images. I wish there were a cleaner way to do it, but the Web Photo Gallery has a limited set of functions and options.
Creating the Gallery
Go to File > Automate > Web Gallery and under Styles choose Lightbox.
Choose your settings and options as usual and let Photoshop create your new Lightbox-ready Web Photo Gallery!