This tutorial describes how to incorporate the Spry framework into a static HTML page in order to create a dynamically generated web photo album. The Spry framework allows users to dynamically load and incorporate XML data into an HTML page with a minimal amount of markup. After developing the functionality of the photo album, CSS is used to create a variety of different layouts for the same basic HTML page.

In this project, the index page of the photo album will display both the thumbnails and the first large image. When the user clicks on a thumbnail image on the index page, the corresponding larger version of that image will display in place of the first image. Traditional web photo albums usually consist of several static web pages, (usually one page per image in the album) along with the images themselves. These pages are usually identical with the exception of their URL, which changes depending on the current large image being viewed. In a traditional photo album, when the user clicks on a thumbnail, (or clicks the next or previous button) on one of the album pages, a completely new HTML page is fetched and loaded into the browser to display the next image. This tutorial uses a different convention—rather than updating the whole page, only the new larger image is reloaded via Ajax. This approach provides a faster display of the images and results in a smoother user experience when reviewing the photos. The Spry framework is very helpful in this situation, because it makes it possible to create a very flexible page that dynamically displays images using only a few lines of code.

If you haven’t already, download the source files for this tutorial and uncompress the zip file. The sample file folder contains the following:

• Spry data framework and xpath.js files
• XML file containing image information: photos.xml
• Sample photos listed in the XML file, including thumbnails
• Completed version of the photo gallery: gallery_finished.htm

The Spry framework

The Spry framework is a JavaScript library that contains all the functions needed for using XML data on the photo album page.

Here’s a list of terms that will be used in this tutorial:

• Data set: A JavaScript object that contains a flattened table-like representation of XML data.
• Dynamic region: A region of a web page that is bound to one or more data sets and has the ability to regenerate itself as the data in the data sets is loaded or changed.
• Data reference: A reference to data from a specific data set inside a dynamic region. As the dynamic region regenerates itself, these data references are replaced with actual data from the data set. Data references are denoted in dynamic regions with curly braces of the form like this: {dataSetName::columnName}. If a dynamic region is bound to only one data set, data references can use the short hand notation instead: {columnName}

It is important that you are familiar with these terms and concepts to follow along with this tutorial. Now let’s start the project.

Requirements

To complete this tutorial you will need to install the following software and files:

Spry framework for Ajax

• Download Spry

Optional: Dreamweaver CS3

• Try
• Buy

Sample files

• photo_album_samples.zip (ZIP, 1.5 MB)

Page 1 of 5

Next Page

About the author