Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Building a ShowPic Image Gallery

This tutorial will teach you how to make an image gallery that is functional, attractive, and quick-loading, using the PVII ShowPic Extension Suite. The supplied work page is already set up and ready to go.

See the finished Gallery here

Download Extensions and Work files

Install your new PVII Extensions

  1. Open Dreamweaver MX
  2. Choose Commands -> Manage Extensions
  3. When the Extension Manager opens, choose File-> Install Extension
  4. Install the ShowPic extension
  5. Repeat steps 3-4 to install the Return False Fix
  6. Close Extension Manager
  7. Close and restart Dreamweaver to initialize your new extensions.

Unzip Work files

Unzip the work files you downloaded and copy them to a new folder within a defined Dreamweaver site.

Add the ShowPic Layers

You'll use ShowPic to insert and configure all the Layers that will display your full-size images.

-Choose Insert - Studio VII - ShowPic Layer by PVII

The ShowPic window will open.

The ShowPic window

Choose your full size image and set ShowPic options:

Entering ShowPic Options

  1. Full Size Image: browse to and select images/imgF_01.jpg
  2. Shim Image: browse to and select images/shim.gif
  3. Caption: you can leave the placeholder text in there or enter your own caption now
  4. Leave Use Park Avenue Styles unchecked
  5. Leave Use Caption checked
  6. Leave Use Descriptive Text checked
  7. Set Left Position to 150
  8. Set Top Position to 100
  9. Click OK

Your first ShowPic Layer appears.

Your first showPic Layer appears

One look at your Property Inspector and you'll see that PVII ShowPic takes care of entering all of the properties for you:

ShowPic Layer Properties

If you gently click the white space between the Caption and the Descriptive Text, you will find a transparent "shim" image. Please don't disturb it!

Note: While you have the "Shim" selected would be the perfect time to edit the Alt text box on your Properties Inspector.

Once you click anywhere else on your page, the ShowPic Layer will disappear. That's normal. You'll see why in a little while.

-Repeat the above steps to insert seven more ShowPic Layers, corresponding to the remaining full size images in your ShowPic images folder: imgF_02.jpg through imgF_08.jpg.

Note: Each ShowPic Layer uses the same transparent shim (shim.gif).

Use the same properties for each ShowPic insertion except for Position Top. Use the following Top settings:

  • image 2: 100
  • image 3: 100
  • image 4: 150
  • image 5: 250
  • image 6: 360
  • image 7: 400
  • image 8: 400

These Top settings work well to ensure that the full-size image appears in a good visual relationship to its thumbnail. You are free to set whatever Top and Left properties you choose.

Note: Whenever the Insert ShowPic window opens, it will retain the Top and Left position settings you last entered.

Given that each thumbnail is 80px high and we have 1px cell spacing, this will ensure that each ShowPic Layer (and the full-size image inside it) lines up fairly close to its associated thumbnail.

When you're done adding all of your ShowPic Layers, open your Layers Panel. It should look like this:

The Layers Panel

About the ShowPic options used

We told ShowPic that we will be using the Layers it creates to house full-size images, which correspond to the thumbnails displayed on the page. However, we do not want to preload all of the full-size images because that would make our page very "heavy" and slow to load. So we select a transparent image (shim.gif) to act as a placeholder. When you select a full-size image, ShowPic analyzes it and learns its dimensions. It uses those dimensions to make the shim the right size. It does this because when you trigger the ShowPic action, the transparent placeholder shim is swapped for the actual full-size image. Only then does the browser retrieve the image from your server. It's as if you made a link to open the image in a popup window, except everything is happening on a single web page!

Our Caption and Descriptive Text is not very imaginative. Feel free to edit it now if you wish. There is no limit to the amount of content you can add.

Left and Top Positions were set to make sure that the ShowPic Layer is far enough to the right to comfortably clear the thumbnail table, and that its top aligns with the top of the first thumbnail (101= the thumbnail layer's top position + the 1px cell spacing on the table inside it).

We've left "Use Park Avenue Styles" unchecked. ShowPic was developed to use the CSS Styles included in the PVII Park Avenue Design Pack.

"Allow Insert at Cursor" is also unchecked (it is so by default). This option permits you to insert the ShowPic Layer code inside another tag. This would be useful if you wanted to employ nested Layers. Nesting Layers is an advanced technique beyond the scope of this lesson. The default placement of ShowPic Layer code is at the bottom of your document's source code, just before the closing </body> tag.

Applying ShowPic to the Body onLoad

When the page is first viewed in the browser, it would be nice to have your first image showing. Here's how to do it:

  • Select the <body> tag on your Tag Selector bar
    Selecting body tag
  • Open your Behaviors Panel
  • Click the plus sign (+) to open the Behaviors menu
  • Choose Studio VII> ShowPic by PVII.

The ShowPic Behavior window will open.

The Layer Name list will contain all eight of your ShowPic Layers and P7ShowPL1 should be selected. That's the one you want.

-Use the Browse button to the right of the Image Path field to browse to and select imgF_01.jpg

-Click OK

Make sure the Event is set to onLoad in your Behaviors panel. If it's not, select the event that is displayed, then click the arrow to its right to open the events list and choose onLoad.

-Preview in a browser

Applying ShowPic to the Thumbnails

Now you'll apply the ShowPic behavior to each thumbnail so that when one is clicked its associated full size image will appear.

  1. Select the first thumbnail image.
  2. Select (click) the <a> tag on your Tag Selector bar
    Selecting the <a> tag
  3. Open your Behaviors Panel
  4. Click the plus sign (+) to open the Behaviors menu
  5. Choose Studio VII> ShowPic by PVII.

The ShowPic Behavior window will open.

The ShowPic Behavior window

  1. Browse to and select images/imgF_01.jpg (your first full size image). The Layer Name list will contain all eight of your ShowPic Layers and P7ShowPL1 should be selected. That's the one we want.
  2. Click OK
  3. Set the ShowPic event to onClick in the Behaviors panel
  4. Repeat the above seven steps to apply a ShowPic behavior to each of the remaining seven thumbnail images, making sure to choose the Image Path and Layer Name that correspond to each of the thumbnails. For instance, make sure that when you are applying ShowPic to the second thumbnail that you have selected images/imgF_02.jpg and P7ShowPL2.

Apply a Return False to each Event

Applying a Return False to each onClick event allows your full size images to correctly appear when you click a thumbnail. It also fixes a bug in Netscape 4 that causes an "hourglass" cursor to appear when links that contain only JavaScript events are clicked.

  • Choose Commands> Studio VII-> Apply Return False Fix by PVII. The Apply Return False window will open
  • Leave the Create onClick if none exists option checked
  • Click the Apply button

Accessibility note: Another advantage of the Return False is that it permits you to link your full size images to the thumbnails. In browsers with JavaScript disabled, the full size image will open in the window as a new page. In JavaScript-enabled browsers, ShowPic will control the display of your full-size image on your gallery page.

Your gallery is done. Now you can customize the page using CSS and a logo and integrate it into your site.

Good job!