OK, I like Adobe's Photo Gallery but not their tutorial. There were too many things they were not talking about that I had to figure out. Also, it was written for pre-CS3. This page provides an expanded walk through of the tutorial.

If you have not seen the Photo Gallery Spry demo, look here: http://labs.adobe.com/technologies/spry/demos/gallery/

This tutorial presently INCOMPLETE 8/07 - In progress (last update: 9/23/07)

First off the online tutorial talks about downloading Spry 1.4 from the Adobe site. No need to do that as DW CS3 includes Spry 1.4. But as of 8/07 Spry version 1.5 is available and it is probably smart to get it. It has some bug fixes. BUT, you do not have to download anything. Everything you HAVE TO HAVE is in DW CS3. Upgrading DW CS3 to write Spry 1.5 code is covered in the Spry Developer's Blog. Substituting 1.5 code for DW's 1.4 code in your web site a simple file copy. DW creates a SpryAssets folder in your site the first time you use a Spry widget and writes needed version 1.4 files into it. You can create the SpryAssets folder and fill it with version 1.5 files. DW will not overwrite them. When uploading DW will upload whichever files are in the site's SpryAssets folder. More on updating below.

One thing that can make life building the gallery way easier is to get a copy of ImagicDigital's (http://www.imagicdigital.com/) Adobe Bridge add on. It will build the XML file you will need directly from Bridge. You will find the downloadable file here: http://www.imagicdigital.com/spry/bridge_export_xml.zip There is a ReadMe.txt that tells how to install and run it. It is way simple.

The actual add on is named bridge_export_xml.jsx and you need to make a small change to the code before installing it. Otherwise Firefox Error Console is going to report malformed code. Remember to make a backup. This file is a JavaScript file so you can edit it with DW or a text editor. If you have installed the add on, look in this folder (Windows) for the file: C:\Program Files\Common Files\Adobe\Startup Scripts CS3\Adobe Bridge

Of course one can modify the script to build whatever XML file one needs.

Get your image files organized.

You need at least two sizes of image. You can get by with one but image quality will suffer. Adobe uses folders named images and thumbs. The tumbnails should be the size of the max expand/grow you plan to use in the preview panel.

This example uses 'shrunk' size of 40px and 'grow' to size of 150px. The actual thumbnail image is 150px.

You can put all your thumbnails in one folder (images/150) and your larger images in another (images/400). It is way easier when all images have the same file name regardless of size. Also, the file names must be exactly the same and that includes the extents, gif's, jpg's, etc. must match too. A Photoshotoshop script is great for generting these images and using the same file name for all sizes of an image makes the script easier to write..

If you want the images in a special sort order you can use Bridge's Ranking to rank them. You can use SPRY properties for the dataset to sort them. Or you can order the XML data file manually.

You can use other Bridge metadata to add other information. Once you are working in Spry you can sort on any of the Bridge fields in the XML file. So, add all the meta-data you may want before exporting. This will save work if you must re-export. When you are done adding metadata run Tools > Export XML for Spry Gallery to build the XML data file. Otherwise you can build the XML file manually (ugh).

For this site I need multiple galleries. This requires additional XML files. I created a folder named data. In it I put all my XML files. I did not seperate the web site images by gallery, just by size. In Bridge however, I arranged each gallery's source files into a sperate folder and then built the XML files with the Adobe Bridge add on.

The Adobe Bridge add on XML files will need to be modified to work with multiple galleries.

The sitename tag is a must. Also, the thumbnail sizes and main image size values are a must for the gallery to work. Fields like media and size were added for this site and are not required.

Since it is unlikly you will use 'China' as a folder name you will obviously need to modify the paths to work with your web site. However, adding the paths within the XML file created problems for me. I decided to control may paths in the HTML document. The base value is what Adobe used to control their paths.

If you do try to modify the path within the XML notice that the JavaScript needs the path separators added as file slashes '\' not web slashes '/'.

For file value use the name of your galleries' file names.

Remember. It is possible to edit the XML file by hand. It is also possible to edit the Bridge add-on to add fields, as it is just a JavaScript file. However, I did learn that you must be careful what you put inside the XML files. Using a amperstand (&) even inside quotes will trash the file and keep it from loading. I am sure Microsoft explains that somewhere. This means that something like, media = "Acrylic & Collage" will not work.

Avoid formatting the look of the page for now. CSS and formatting will be added later. For now it just adds complexity to getting things working.

At this point you should have your images and XML files in place. Start with a blank html page. Adobe's tutorial (CS2 era) has you doing lots of hand coding that CS3 will do for you. We can avoid some of the hand coding.

With CS3 we are now ready to link to the XML data set built from Bridge. Select the Spry tab and the far left icon. Its label is SPRY XML Data Set.

For multiple galleries things get complex. So, if you have not worked with SPRY datasets before you might want to select one of your gallery's files (not the 'gallery' list). Select the "photo" item in the data set dialog window. This will show what the bindings are at the gallery image level. (shown below)

Cancel the image listing if you are experimenting with it.

Select GALLERIES and create a dataset.

If you have done it correctly, your Application Bindingd panel will look like the one below.

Having these bindings handy makes life much easier and avoids errors from typos.

 

I use one DIV for an outer container and named it that.

I plan to build two DIV's. One for the left column, named previews. Another for the left column named picture. The 'preview' DIV is just a plain DIV (Insert > Layout Objects > DIV Tag). Place your cursor where you want the DIV's inserted. Use the DIV Tag command to insert a DIV and name it (ID=) preview. Click outside the DIV but inside outer and click the second SPRY icon, SPRY Region. You will have a dialog that looks like this:

Select the Detail Region radio button.

This will insert the DIV and the code to make it a SPRY region. While the DIV is still selected, enter the ID value picture in the Properties dialog.

 

There appears to be no way to add the Spry Region to an existing DIV. So,I make the SPRY Region and add the ID. The result will look something like this:

 

The ds_galleries is the name we gave the data set when we created it.

9/23/07 in progress below this point...

Inside the DIV add a thumbnail image inside the region by selecting Insert > Image Object > Image Placeholder. It would be nice if you could clear the image size values. You will need to remove width and height in the Code View window. Then from the Application-Bindings panel drag @path to the code window and drop it into the image SRC.

Your code will look something like:

 

Now fix the path to the thumb images. Mine looks like:

Now we need to make the thumbs code repeat for every image in the gallery. Select the image placeholder that should look like this:

Then select Spry Repeat (3rd icon in Spry tab). It's dialog should look like this:

The result will look like:

You can test this page and see if the images are repeating. If not, you likely have path problems or have selected the wrong item when you created the Spry XML Data Set.

Getting the preview effect of growing and shrinking thumbnails is a bit tricky. The size is controled from the HTML image code, gallery.js and the values in the XML data.

First the higth and width values in the HTML image tag controls the initial image size.

Next the values in gallery.js provide default values... I did not figure out from where any other values could come. It looks like the script attemps to pull values from the page's DOM. Whatever, set the value equal to the HTML image tag values. This is the size to which the thumbnail returns.

The XML file has image size values for the thumbnail and the main image. The value used for the thumbnail size is the size to which the image will grow.

 

The gallery name at the top of Adobe's demo page is also controled from gallery.js.

The gallery.js file is dependent on your SPRY dataset names. Two of the dataset names are used within gallery.js. If you use the dataset names I did you will need to search gallery.js for dsPhotos and dsGallery and replace them with whatever names you used. (Well... this is supposed to be a learning experience.)

By now you should have a working page. If you made the pages html pages you can just open them in IE7 or Firefox and it should work.

The right-hand DIV 'main' should be made into a detail data window. First make it into a Spry Region. The code will look like this:

This detail region adds lots of magic behind the scenes. It will eventually automatically update itself as we select items in the thumbnail section. So it is important which region you use. Spry regions do not listen for changes. Spry DETAIL regions do listen for changes and that is the difference between them.

You can check the page now and you should see content in both DIV's.

We are now down to code editing for most of the rest of the development. There are not any pre made DW widgets to add the code we need. Fortunately it is not code intense.

 

Add thumbnail control... To be able to click the thumbnail and have the 'detail' side update we need to add spry:setrow to the thumbnail image tag. It will look like this:

Adobe says this about the SETROW command:

When the user clicks on a thumbnail, the spry:setrow attribute tells the browser to set the RowID of the data set as the CurrentRow. The 'spry:detailregion' attribute is updated with this value and that in turn updates the path of the main image with the image name from that node ID in the XML file. The new main image is now displayed.

Now we have the basic gallery working. It is time to start working on layout.

Main Display Area

 

Now set the CSS style for the thumbnails. Select the thumbnail placeholder and open the CSS Styles panel. Select the in- document <style> in the CSS 'All' window and click the New CSS Rule icon. This should fill in the initial dialog. BUT, it suggests a style for ALL images within the DIV and that is not what we want. Change it to an Advanced Selector and make the class for <img> tags, e.g., img.thumbs. Then add a 1px border black and a 2 px margin on all sides and set float to left. You can also set size if you want to control it. Next right-click the img tag selector at the bottom of the edit window and apply the CSS style to the image. Once this is done the thumbs should begin to appear in rows and columns.

The image tag will look like:

At this point you should have a working gallery.

Warning: Adobe has this warning in their tutorial.

Note: The current version of the Safari browser has a known issue regarding renaming nodes that causes the photo album page to display incorrectly unless a workaround is implemented. If you are creating the site for Safari users, it is necessary to update your XML file slightly for the photo album to display correctly. The issue occurs because the Safari browser will convert an XML node named 'image' into an actual <img> tag! If you encounter this issue, update your XML file by changing the <image> XML node to something different, like <photo>.

The sample gallery that Adobe built has many more features (Reference) To add those effects we need to add the Effects scripts.

And add Adobe's Gallery script.

To get the thumbs to grow as they do in the Adobe demo there are several more things we need to do. First each thumb has to have a unique name. We have to get Spry to name/ID them. Notice in the Bindings there is an item labeled ds-RowID. Use this to build an ID.

id="tn{ds_RowID}"

 

I ran into some problems figuring out what Spry was doing and how some of the CSS Adobe provided was working. There are some debugging tools provided. To see the markup Spry does you can set Spry.Data.Region.debug = true in one of the header scripts. More info is available at Adobe in the SAMPLES section (ver 1.5).

 

Additionally an Adobe writer recommends IE7pro, an add on for IE7. The add on allows one to see Spry generated code in IE7.

There were scheduling and testing reasons that caused Spry 1.4 to ship with DW CS3. However it is possible to manually update DW to the current version of Spry. Plus the Spry team promises DW extensions to automate the update. Until then the DW Spry files are in: 'DW application folder/Configuration/Shared/Spry/'. In Vista that is: C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\Shared\Spry

Details are here: C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\Shared\Spry
Read the thread for some considerations on updating. Remember. These are PRERELEASE versions.

Backup your existing folders before you update!