SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Photoshop Basics Lightbox Web Photo Gallery

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, combined with the Web Photo Gallery, we can create a very slick photo gallery for your website quickly and easily.

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.

  • Mild-Programmers Those you of you that can handle some basic HTML and aren't afraid of a little javascript, read on, this tutorial is mostly for you.

  • 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.

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".

image 1

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.

image 2
Click to enlarge

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.

General Options

image 3
Click to enlarge
  1. Email address: %EMAIL%
  2. Character set: %CHARSET%
  3. Image width / Image height: %image_width% / %image_height%

Banner Options

image 4
Click to enlarge
  1. Site Name: %BANNER%, %TITLE%
  2. Photographer: %PHOTOGRAPHER%
  3. Contact Info: %CONTACTINFO%
  4. Date: %DATE%
  5. Font: %BANNERFONT%
  6. Font Size: %BANNERFONTSIZE%

Large Image Options

image 5
Click to enlarge
  1. Add Numeric Links: %ANCHOR%, %NUMERICLINKS%
  2. Border Size: %IMAGEBORDER%
  3. Titles: %FILENAME%, %FILEINFO%, %CREDITS%, %CAPTIONTITLE%, %COPYRIGHT%
  4. Font: %CAPTIONFONT%
  5. Font Size: %CAPTIONFONTSIZE%

Thumbnail Options

image 6
Click to enlarge
  1. Size: %THUMBNAIL_WIDTH%, %THUMBNAIL_HEIGHT%
  2. Columns and Rows: %THUMBNAILSROWS%
  3. Border Size: %THUMBBORDER%
  4. Titles: %ALT%,%FILENAME%, %FILEINFO%, %CREDITS%, %CAPTIONTITLE%, %COPYRIGHT%
  5. Font: %CAPTIONFONT%
  6. Font Size: %CAPTIONFONTSIZE%

Custom Color Options

image 7
Click to enlarge
  1. Background: %BGCOLOR%
  2. Text: %TEXT%
  3. Link: %LINK%
  4. Banner: %BANNERCOLOR%
  5. Active Link: %ALINK%
  6. 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. Adobe doesn't pay much attention to web standards.

image 8
Click to enlarge

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.

image 9
Click to enlarge

Then enter the body tags and tokens and save the file as IndexPage.htm in the "Lightbox" folder, overwriting the original file.

image 10
Click to enlarge

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:

image 11
Click to enlarge

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/.

image 12

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:

image 13

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.

Lightbox Web Photo Gallery
Click to enlarge

Choose your settings and options as usual and let Photoshop create your new Lightbox-ready Web Photo Gallery!

subscribe to newsletter