Create an image gallery with clickable thumbnails
The Set Image URL action in Adobe® GoLive® is most often used for linking from a thumbnail image to a larger image shown elsewhere on the page. In this tutorial, we use Set Image URL to link a series of thumbnails to a larger area that displays full-size images. To further enhance the experience for site visitors, we preload large images so they appear the moment a thumbnail is selected.
Link thumbnails to large images
We assume you already have the images you want to use for this page. You will need two versions of each image: a large image and a thumbnail.
-
From within the site file in GoLive CS, create a new page and save it.
-
Construct your basic layout using a table or a grid.
Note: You get the best results if the large images have at least one dimension – height or width, but preferably the width – which is the same for all images.
-
Place the large image you want your page to start with at the desired location on the page.
-
Select the large image, and open the Image Inspector. At the bottom of the Basic tab, find the field for Name/ID.
You can type in a name for the image or choose Name & ID from the drop-down menu beside the Name/ID field. The name you provide in this field provides the Set Image URL action with the information needed to specify where on the page the larger images will appear. We’ll use the same name for each thumbnail.
Note: If you let GoLive provide the name, it may be somewhat cryptic. If you type it in yourself, remember that the name should never begin with a number. (If it does, the action we’re going to use won’t function.)
-
Now, place your first thumbnail.
-
Select the thumbnail.
-
With the thumbnail selected, click the Link tab in the Inspector to specify a link for the image. In the first field of the Link tab, type #. That's all you need to do in this palette.
-
With the image still selected, make the Rollovers & Actions palette active. Click the Actions tab.
-
Choose an event for the action, such as Mouse Enter or Mouse Click.
The event most used is Mouse Enter (often called Mouse Over), which makes the large image appear automatically when visitors move the cursor over the thumbnail. If you use Mouse Click, visitors will need to click the thumbnail before the large image changes.
-
Click the Create New Action button at the bottom of the Actions field.
-
Select the new generic action and click the Action button. In the drop-down menu that appears, choose Image > Set Image URL.
-
For Image, choose the name you specified earlier for the large image. In the Link field, link to the large version of the image that you matches the thumbnail. (For the first image, choose the one that’s already placed.)
