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

The introduction of the Spry framework into Dreamweaver has brought a whole new level of dynamic possibilities for web designers. The framework is essentially a collection of assets that includes JavaScript files, CSS examples, effects, widgets and much more which can be integrated into static HTML pages.
This tutorial looks at introducing a couple of JavaScript files, xpath.js and SpryData.js, into the head of a page. These provide all the necessary JavaScript code already tried and tested, eliminating the need for designers to write long streams of code. Alongside this, we will show you how to add a data source, in this case an XML file, and use a number of Spry elements to pull information from the data source.
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.

02 Images

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.

Pages: 1 2 3 4 5