Captions in Photo Album

Question

I've been trying to add captions to the photo album demonstrated in the Spry demo page (http://labs.adobe.com/technologies/spry/demos/gallery_pe/dynamic/index.html).
Applying the method suggested in DBooth's tutorial for an earlier version of a Spry album, I added an attribute, "description",  to the <photo> element in the xml. In the html, I placed {@description} immediately beneath the image in div="picture". This worked in the DBooth version I built, but not in this one, following the code for the dynamic version above.
Here's what I have:
http://www.lumina-media.com/gallerytest/wjgallery2.html
(Ignoring styling for the time being, the description tag shows up in the padding area. I'll deal with css later.)
But it doesn't work. Can anyone help me?
I'm attaching both the html and xml files.
Thank you in advance.
Nick

Answer 1

When the thumbnail is clicked we want the detailed region updated along with with the main image,
I think this section of code is where it belongs.
<div id="thumbnails" spry:region="dsPhotos">
              <div class="thumbnail" spry:repeat="dsPhotos"><a href="{path}"><img alt="" src="{thumbpath}" /></a></div>
                <p class="ClearAll"></p>
            </div>
        </div>
<div id="picture">
          <div id="mainImageOutline"><img id="mainImage" alt="main image" src=""/></div>
     <div class="thumbnail" spry:repeat="dsPhotos"><a href="{path}"><img alt="" src="{thumbpath}" /></a></div>
xml file below:
<thumbnail base ="../../gallery/galleries/china/thumbnails/" font = "Arial" fontsize = "4" color = "#F0F0F0" border = "0" rows = "3" col = "5"> </thumbnail>
<large base ="../../gallery/galleries/china/images/" font = "Arial" fontsize = "3" color = "#F0F0F0" border = "0"> </large>
<photos id = "images">
<photo
path = "china_01.jpg"
width = "263"
height = "350"
thumbpath = "china_01.jpg"
thumbwidth = "56"
thumbheight = "75"
caption = "Caption 1a">
</photo>
<photo
path = "china_02.jpg"
width = "350"
height = "263"
thumbpath = "china_02.jpg"
thumbwidth = "75"
thumbheight = "56"
caption = "Caption 2">
</photo>
<photo
path = "china_03.jpg"
width = "350"
height = "263"
thumbpath = "china_03.jpg"
thumbwidth = "75"
thumbheight = "56"
caption = "Caption 3">
</photo>
</photos>
</gallery>
OK, some confusion here, description is now "caption", this was changed in XML file in this thread.
The xml file is above:
Then in my html file I have only added:
<div spry:detailregion="dsPhotos">Hello{caption}</div>
Then my gallery_xds.js file looks like:
function PhotosFilter(ds, row, rowIndex)
row.path = row["large/@base"] + row["photos/photo/@path"];
    row.thumbpath = row["thumbnail/@base"] + row["photos/photo/@thumbpath"];
    row.caption = row["photos/photo/@caption"];
    return row;
The result gives me the "Caption1" once and it is the same for all, no refresh.
Any help would be greatly appreciated.
WBell
Message was edited by: W_Bell