Spry gallery_pe, add caption to photo

Question

I have created a dynmic photo gallery using the example files
included with the Spry demos. This dynamic gallery uses the
gallery_xds.js file. I am trying to add a caption under the photo.
I can get the caption for the first photo to show but it does not
change when the next photo is displayed.
Does anyone know how to do this? I am a novice as javascript
and not familiar with it much.
Thanks,
Linda

Answer 1

Thanks so much for the links. I have a question that I could
not find an answer to. This refers to the code provided by
epsilon718, on Monday, October 15, 2007 4:11 AM. It appears below
my question.
My question: The only part that is not clear is this:
================== index.html =================
1) in the div with id thumbnails, add the following to the
<a> tag: id="{ds_RowID}"
Here is the original code from the spry demo:
<div id="thumbnails" spry:region="dsPhotos">
<div class="thumbnail" spry:repeat="dsPhotos"><a
href="{path}"><img alt="" src="{thumbpath}"
/></a></div>
As you can see it is an a href tag. Where do you add the
id="(ds RowID}" ?
Here is the entire code provided:
Answer
Hi,
I was able to get the caption to show up with a few minor
changes to few of the files. The changes I made do not make the
caption appear on only the first image when in slideshow mode.
After the first image, they'll appear. Also, If you click on the
thumb, they'll show up. Find the changes with the file names below:
================== index.html =================
1) in the div with id thumbnails, add the following to the
<a> tag: id="{ds_RowID}"
2) In the div with id picture, add another div with id
captionText:
<div id="picture">
<div id="captionText"></div>
<div id="mainImageOutline"><img id="mainImage"
alt="main image" src=""/></div>
</div>
================== gallery_init.js ===============
1) modify the signature of InitializeGallery function to take
in the dataset as a parameter:
function InitializeGallery(ds)
2) replace the gThumbViewer.addObserver with the following:
gThumbViewer.addObserver(function(notificationType, notifier,
data)
if(!data)
return;
if (notificationType == "onSelect")
gImageViewer.setImage(data.href);
var row = ds.getRowByID(data.id);
Spry.$('captionText').innerHTML =
row['photos/photo/@caption'];
========================= gallery_xds.js =================
change the call to InitializeGallery function (line 86) by
passing in the data set:
InitializeGallery(dsPhotos);
======================= XML files ==================
add in your caption text as an attribute of the photo tag,
just like path, thumbpath, etc are.
====================== SpryThumbViewer.js ==========
in the Spry.Widget.ThumbViewer.prototype.select function,
modify the calls to notifyObservers to accpet 'a' instead of
'a.href':
if (a)
//this.notifyObservers("onSelect", a.href);
this.notifyObservers("onSelect", a);
if (img == imgs[0])
this.notifyObservers("onFirstSelect", a);
if (img == imgs[imgs.length - 1])
this.notifyObservers("onLastSelect", a);
I think that's about it. Give it a try and let me know if
there are any other problems.
If you can help, that would be great. Thank you, Linda