Image gallery using Dreamweaver CS3 and Spry Framework

Search Engine Users are Search Savvy: Does your Website have the right keywords to attract the right people?…
read more

Why Credit Crunch Cutbacks Must NOT affect your staff training programme…
read more

Go back

Image Gallery using Spry framework
This tutorial will explain how to create image gallery (thumbnail viewer) using Spry Widgets which come together with Dreamweaver CS3. Download the style sheet used in this tutorial by clicking on the download button on the right.
Demo

Download

Create the following folders and sub folders:

images/large
images/thumb

and files, directly in your site´s root folder:

data.xml
index.html

Prepare 6 different images and resize them to something like width 339px mine are 339px wide and 254px high. Place all of then inside of the images/large folder. You will also need to create thumbnails for them with the same name as the large ones, but much smaller. For this purpose I have resized and cropped all images so that the thumbnail has a shape of square rather than rectangle. I have chosen the dimensions: 50px / 50px.
Place your thumbnails inside of the images/thumb folder.

Now it´s time to prepare our xml file which will store all necessary information about our images.
Open data.xml and after the line which reads <?xml version="1.0" encoding="utf-8"?> type:

<image>

</image>
<image>

</image>
<image>

</image>
<image>

</image>
<image>

</image>
<image>

</image>

</imageset>

Save and close the file.

Now open the index.html file and attach the style sheet which you have downloaded at the beginning of this tutorial.

In between the <body></body> tags type:

</div>
<div id="cont">

</div>

</div>

Now from the Bindings tab of the Application panel choose Spry XML Data Set (Fig. 01).

Image illustrating how to create Spry XML Data Set in Dreamweaver CS3

Fig. 01

In the Spry XML Data Set window, give your data set a name I have just left it as ds and attach our data.xml file by clicking Browse button and pointing to its location. Once the file has been attached click Get schema button to retrieve the schema of the xml file.
In the Row element section, select the image node and click OK to create a data set (Fig. 02).

Image illustrating Spry XML Data Set window in Dreamweaver CS3

Fig. 02

Save the file and in the window which will pop in click OK to indicate that you´ll remember to copy dependent files (generated by Dreamweaver) to your remote server (Fig. 03).

Fig. 03

In the Bindings section of the Application panel you should now see our data set (Fig. 04).

Image illustrating xml data set in the application panel

Fig. 04

Still in the Code view, place your cursor after the <div id="cont"> line and change the view to Design.
From the Spry tab of the Insert panel choose Spry Table (Fig. 05).

Fig. 05

In the Insert Spry Table window check Update detail regions when row is clicked and click OK (Fig. 06).

Image illustrating Insert Spry Table window

Fig. 06

Now change the view to Code and identify our table:

<table>

<tr>

<th>Imgfile</th>
<th>Imgthumbwidth</th>
<th>Imgthumbheight</th>
<th>Imglarwidth</th>
<th>Imglarheight</th>

</tr>
<tr spry:repeat="ds" spry:setrow="ds">

<td>{imgfile}</td>
<td>{imgthumbwidth}</td>
<td>{imgthumbheight}</td>
<td>{imglarwidth}</td>
<td>{imglarheight}</td>

</tr>

</table>

We will convert our table to unordered list (<ul>).

First of all completely remove the following content:

<table>

<tr>

<th>Imgfile</th>
<th>Imgthumbwidth</th>
<th>Imgthumbheight</th>
<th>Imglarwidth</th>
<th>Imglarheight</th>

</tr>

and:

<td>{imgfile}</td>
<td>{imgthumbwidth}</td>
<td>{imgthumbheight}</td>
<td>{imglarwidth}</td>
<td>{imglarheight}</td>

</tr>

</table>

This way we are only left with:

Change the tr to li and at the end of this line type the closing </li> tag.
Your line should now look like this:

Now place your cursor at the beginning of this line and type:

and after closing </li> tag type closing </ul> tag.
The entire line should now read:

We need to insert an image tag for the thumbnail in between the <li></li> tags. After <li spry:repeat="ds" spry:setrow="ds"> type:

The names within the curly brackets {} are the names of tags from our xml file which populate relevant information for each record.

If you test your page in the browser you should now see a list of 6 thumbnails displayed horizontally as in Fig. 07

Image illustrating thumbnails displayed horizontally

Fig. 07

Go to the Design view, click on the upper image placeholder and then click <div#limg> tag selector (Fig. 08).

Image illustrating selected image placeholder

Fig. 08

Now from the Spry tab of the Insert panel choose Spry Region (Fig. 09).

Image illustrating Spry tab of the Insert panel

Fig. 09

In the Insert Spry Region window select DIV and Detail region, from the Spry Data Set choose our data set ds and for Insert select Wrap selection and click OK (Fig. 10)

Image illustrating insert spry region window

Fig. 10

Change the view to Design and identify the line which reads:

Remove the hash (#) symbol and in its place type images/large/.
Now from the Bindings section of the Application panel drag and drop imgfile to the end of the src path. Your src path for the image should now look like this:

Do the same with the width, height and alt attributes assigning the following:

width: imglarwidth
height: imglarheight
alt: imgfile

Your image in the Code view should now look like this:

You can add another tag to your xml file which would store some more meaning full name for the image and replace the alt tag value with it. The same if you´d like to display some description for each image.

Save and test the file by clicking thumbnails to change main image.
And that´s it there is to it.

Prepared by Freelance Web Designer – Sebastian Sulinski.