Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Imagine Admin
12th April 2010

Create an image viewer with Spry

The latest release of the Adobe Spry framework allows designers to create dynamic content the easy way

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

Create an image viewer with Spry

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

Create an image viewer with Spry

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

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.neotericuk.co.uk/ website design

      Though i have yet not applied but i really liked the concept…….Thanks for sharing with us.

    • http://www.zylone.com/ Singapore web design agency

      I like this – “The full-size images can be simply resized”. Really very nice things to read on web.

      Thx

    • Abbie

      Hi, I have got as far as page 4, got to this bit:

      Now go to Insert>Spry>Spry XML Data Set, name the data set, eg dsGallery, click Browse, locate the the XML file just created, press get Schema, press photo to populate XPath as follows: gallery/photos/photo and press OK. Dreamweaver may place the code further down the page. If so copy and paste and place next to the includes for neater code layout.

      and I get this message:

      Failed to get schema from the dynamic feed. Please make sure the testing server is configured in the site definition.

      Help please?!

      Thanks

    • http://www.laurencecaro.co.uk Website Design Banbury

      This is realy cool. Many thanks. LC

    • http://www.maxipcmarket.com ucuz web tasarım

      very cool thanks…

    • munsing sookunah

      i want all the coding of html to learn how to create a web site

    • Samantha

      I am having the same problem as Abbie. Additionally, mine says “Expected an attribute value(2,8)”

    • http://matthewanonen.ca Matt

      I am also having the problem Abbie and Samantha indicated. And it expects and attribute value (6,8). This tutorial could be a little more specific. I see differences in the process between Dreamweaver CS3 and my CS4

    • http://www.globuledesign.com Globule Design

      What I’ve started doing for a couple of projects recently is to add an image gallery to wordpress and then export gallery to xml which I parse using ajax requests.

      That way my clients have a robust image management system but the actual gallery site has none of the overheads of constantly running the IMS.