Web Design Somerset :: Web Design Tutorials
 
 

How can we help you?

 
 

Services by business type

 
 

Latest articles

The 7 Most Hated Things on Your Website
Poorly designed websites can lead to high abandonment rates, low conversion rates and poor rankings in the search…
read more…
How to Make the Customer Online Registration Process Plain Sailing
Most of us are used to having to go through a sign up procedure when we buy from a website for the first time, but we…
read more…
9 Ways to Improve Your Website Navigation
Easy and comprehensive navigation within your website is essential. If a website is too complicated to get around,…
read more…
The Benefits of Using Icons in Web Design
Using icons within website design can be an effective way to communicate with users. When a visitor first arrives at…
read more…
 

Web Design Tutorials

Category: Dreamweaver tutorials

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.

Download | Demo
preview

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:


<imageset>
<image>
<imgfile>001.jpg</imgfile>
<imgthumbwidth>50px</imgthumbwidth>
<imgthumbheight>50px</imgthumbheight>
<imglarwidth>339px</imglarwidth>
<imglarheight>254px</imglarheight>
</image>
<image>
<imgfile>002.jpg</imgfile>
<imgthumbwidth>50px</imgthumbwidth>
<imgthumbheight>50px</imgthumbheight>
<imglarwidth>339px</imglarwidth>
<imglarheight>254px</imglarheight>
</image>
<image>
<imgfile>003.jpg</imgfile>
<imgthumbwidth>50px</imgthumbwidth>
<imgthumbheight>50px</imgthumbheight>
<imglarwidth>339px</imglarwidth>
<imglarheight>254px</imglarheight>
</image>
<image>
<imgfile>004.jpg</imgfile>
<imgthumbwidth>50px</imgthumbwidth>
<imgthumbheight>50px</imgthumbheight>
<imglarwidth>339px</imglarwidth>
<imglarheight>254px</imglarheight>
</image>
<image>
<imgfile>005.jpg</imgfile>
<imgthumbwidth>50px</imgthumbwidth>
<imgthumbheight>50px</imgthumbheight>
<imglarwidth>339px</imglarwidth>
<imglarheight>254px</imglarheight>
</image>
<image>
<imgfile>006.jpg</imgfile>
<imgthumbwidth>50px</imgthumbwidth>
<imgthumbheight>50px</imgthumbheight>
<imglarwidth>339px</imglarwidth>
<imglarheight>254px</imglarheight>
</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 id="wrap">
<div id="limg">
<img src="#" width="" height="" alt="" />
</div>
<div id="cont">

</div>
</div> 

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

fig_01

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).

fig_02

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

Fig. 03

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

fig_04

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

Fig. 05

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

fig_06

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 (&lt;ul&gt;).

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:


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

This way we are only left with:

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

Change the tr to li and at the end of this line type the closing &lt;/li&gt; tag. Your line should now look like this:

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

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

<ul id="ulthumb">

and after closing &lt;/li&gt; tag type closing &lt;/ul&gt; tag. The entire line should now read:

<ul id="ulthumb"><li spry:repeat="ds" spry:setrow="ds"></li></ul>

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

<img src="images/thumb/{imgfile}" width="{imgthumbwidth}" height="{imgthumbheight}" alt="{imgname}" />

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

fig_07

Fig. 07

Go to the Design view, click on the upper image placeholder and then click &lt;div#limg&gt; tag selector (Fig. 08).

fig_08

Fig. 08

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

fig_09

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)

fig_10

Fig. 10

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

<img src="#" width="" height="" alt="" />

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:

<img src="images/large/{ds::imgfile}" width="" height="" alt="" />

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:

<img src="images/large/{ds::imgfile}" width="{ds::imglarwidth}" height="{ds::imglarheight}" alt="{ds::imgfile}" />

ou 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.

 

Category: Dreamweaver tutorials

Go back
 

All rights reserved © Website Design Company :: Core Media Design Limited 2004 – 2014
Core Media Design Limited is registered in England No 6557241
Small Business Website : Web Design Tutorials

Back to top
 ;

Explore in further details…

  • Multimedia Design
    Multimedia presentations weave realism and excitement into any project and help to deliver an influential message.
  • Training Sessions
    Do your personnel lack the software skills and knowledge they need to help your business grow and develop?
  • Website Design Company
    An all-embracing web development service where breathtaking website design blends with skilled database and ecommerce...

And other…

 ;