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:
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.
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 then post them in the comments.
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="%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.
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/].
- var loadingImage = ‘images/loading.gif’;
- var closeButton = ‘images/close.gif’;
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!
Don’t forget to check out the Lightbox 2.0 Web Photo Gallery tutorial.
- Posted at June 12th, 2006 06:44pm
- Posted by Tommy Maloney
- Filed under Actions and Automation, Tutorials, Web
- Tagged with Actions and Automation, automation, lightbox, photo gallery, photoshop, tutorial, Web
- 3 Comments have been made
- Lightbox 2.0 Web Photo Gallery
- Website Design Mockup Tips
- Web 2.0 Design Kit, Part 2
- Web 2.0 Design Kit
- Peeling Sticker Effect