Adobe Photoshop’s Web Photo Gallery is a great and easy to use
function, but the quality of your preset options have always seemed
lacking. Using the Lightbox JS javascript library and the Web Photo Gallery we can easily create a very slick photo gallery for your website.
Lightbox Web Photo Gallery
Adobe Photoshop’s Web Photo Gallery is a great and easy to use
function, but the quality of your preset options have always seemed
lacking. Using the Lightbox JS javascript library and the Web Photo Gallery we can easily create a very slick photo gallery for your website.
Getting Started
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”.
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].
These next few images will illustrate the options in the Web Photo Gallery and (some of) their corresponding tokens.
General Options
- Email address: %EMAIL%
- Character set: %CHARSET%
- Image width / Image height: %image_width% / %image_height%
Banner Options
- 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%
Thumbnail Options
- 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%
The Coding
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.
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.
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/].
- 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!
|
