Create an image viewer with Spry
The latest release of the Adobe Spry framework allows designers to create dynamic content the easy way. Here we demonstrate how to create a dynamic image viewer
This tutorial is based on two div tags, one to contain the thumbnail images and the other to contain a full-size version of the chosen thumbnail. We will also give some tips on how to style and position the thumbnails and integrate into a standard static HTML page.
This tutorial originally appeared in Web Designer issue 154, authored by Steve Jenkins
01 Get ready
Before indulging in any Dreamweaver activity users will need to download the Spry framework for Ajax and create an XML file containing the image information relating to the thumbnails and full-size images needed for the gallery. The latest version of the Spry framework can be found via the Adobe Labs page at http://labs.adobe.com/technologies/spry/. Download the framework – the file is a zipped file – unzip and place the folder in an easy to access location, ie on the desktop, for the time being. We shall come back to the Spry framework folder later in the tutorial.
The images to be used in the gallery come in two forms, thumbnail and full-size image. The thumbnails will appear in a separate absolutely positioned div tag and when clicked will display the full-size image in another absolutely positioned div tag. For the purpose of this tutorial all full images are going to be cropped and resized so that they all have the same dimensions. This is not essential, but will give the gallery a uniform look. To complete the image line-up open the image editor of choice and resize all images to the desired dimension. Now return to the newly resized images and create the thumbnails. The full-size images can be simply resized, ie 90 x 90 pixels, to fit the thumbnail gallery, But if the images are a different perspective they will look stretched. Alternatively, the thumbnails do not need to be square. They can retain the same shape as the full-size images. For this tutorial we have made the full-size images 437 pixels x 261 pixels and the thumbnails 135 x 135 pixels. Save the full images into a folder called images and save the thumbnails into a folder called thumbnails.