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.

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 then post them in the comments.

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

webgallery1

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.

*UPDATE*
Due to popular demand, I’ve added instructions to using the Lightbox 2.0 javascript with Web Photo Gallery in this mini-tutorial.

webgallery14

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

webgallery2

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

Banner Options

webgallery3

  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

webgallery4

  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

webgallery5

  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

webgallery6

  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.

webgallery7

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.

webgallery8

Then enter the body tags and tokens and save the file as [IndexPage.htm] in the “Lightbox” folder, overwriting the original file.

webgallery9

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:
webgallery10

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’;

webgallery11

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:
webgallery12

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

webgallery13

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.

* Photos from stock.xchng, design and colors from/inspired by Lightbox JS 2.0 website.

Comments Spill 3 Comments »

  1. December 17, 2008 8:41 pmfactotum218

    This is a great how-to. I will have to give this a try once I get more portfolio-worthy results in my graphic design work.

  2. December 29, 2008 1:16 pmterry allen

    Very very useful and lovely layout. I am an html dummy, so excuse me if i ask a few dumb questions.
    1. what do i change so that i can display more fotos on a screen, say 20 or 24. or increase the number of columns to 5. i get a max of 15 [4 rows of 4 with a bottom row of 3] and 16th foto, which you would expect, does not display in the last row.
    2. how can i decrease the space between the bottom of the thumbnail and the top of the title/file name.
    thanks,
    terry

  3. January 14, 2009 3:25 pmJille

    I was on this page earlier but do not know what happened. I do not see the one where you click on the thumbnail and it goes to another page with the numbers on top anymore.

    I would like to use that one instead of the lightbox pop up. I am guessing that is the older version. How/where do I find that again?

 
Leave A Comment TrackBack URL