freeway tutorials | image gallery

This tutorial explains how to create the image galleries used on my photo site.

This example contains 10 rather than 15 images, and the main image area is smaller, but clearly all the numbers can be changed as required. The relative position of the boxes is irrelevant, they can be moved around at will, for instance the thumbnails could run vertically down the page with the main image to their right.

This method does not permit drag-and-drop of images from the Finder or iPhoto. If using iPhoto then export or drag the required images to a folder in the Finder.

CCS Layout (layers) must be enabled.

1 create thumbnail

Create a new document and in the Site Panel click the cog button and select Show Items. Draw a Graphic element and in the Inspector set the width (W:) and height (H:) to 39 pixels and give it a distinctive name, in this case thumbnail.

2 apply rollover action

Open the Actions palette (Windows>Actions [option-command-A]) and apply the Rollover action to the box. Click the Parameters tab in the Actions palette and change MouseOver #: to 1.

3 duplicate thumbnails

Select Duplicate... from the Item menu [command-D], set the Horizontal offset to 40, the Vertical offset to 0 and the Number of copies to 10. Click OK [return]. Select the right-hand box and add 1 pixel to its width.

4 change mouseover numbers

Select the first thumbnail box and delete it; this will leave 10 boxes numbered from 1 to 10. Select thumbnail2 and change the MouseOver #: setting in the Actions palette to 2, then change numbers 3 to 10 respectively, so that the thumbnail number matches the MouseOver number in each case.

5 create main image box

Now draw a new Graphic element below the thumbnails and size it to W: 400 and H: 300. Position it so it sits 1 pixel below the thumbnails and lines up on the left-hand side. Give it a distinctive name such as image.

6 apply slave show/hide layer action

Apply the Slave Show/Hide Layer action to this box. Change the first two parameters to Initially: Hidden and Restore: Sticky.

7 duplicate image boxes

Select Duplicate... , set the Horizontal offset to 0, the Vertical offset to 0 and the Number of copies to 10. Click OK [return]. This will create a stack of boxes.

8 change slave numbers

Select the original box by clicking its name (image) in the Site Panel and delete it. Again using the Site Panel, select image2 and in the Actions palette change Slave #: to 2. Repeat for images 3 to 10, as above, so that in each case the image number matches the slave number.

9 import images

Click image1 in the Site Panel to select it, then select Import... from the File menu [command-E] and import your first image. You will notice that the name of the box changes to the filename of the image. Size and position the image. Then import and adjust images 2 to 10 in turn.

10 import thumbnails

Now repeat the process for the thumbnails, ensuring that the image imported into the thumbnail1 box is the same image that you imported into what was the image1 box, that thumbnail2 corresponds to image2 and so on, so that each thumbnail rollover triggers the correct image. Preview to check that everything works as it should.