Hello. I'm trying to build a gallery with thumbnails that, when clicked, grow
to display the full-size image. I created an xml spry data set and I'm using a
spry:repeat to go through each row of the data set and create the thumbnail.
Then I attach the grow effect, but since the target is each of the thumbnails,
I need an unique id for each. I tried using id="thumb_{ds_RowID}" (and
ds_RowCount and ds_RowNumber) but it doesn't work.
I guess ds_RowID is not valid outside the spry:region, but perhaps there's a
way around this?

Can anyone give me any sort of advice on how I could make this work? Thank you.

Xml sample:
<thumbnail_list>
<thumbnail>
<path>images/1.jpg</path>
<caption>some text</caption>
</thumbnail>
...
<thumbnail>
<path>images/n.jpg</path>
<caption>some text</caption>
</thumbnail>
</thumbnail_list>

dataset:
var dsThumbs = new Spry.Data.NestedXMLDataSet(dsThumbs,
"thumbnail_list/thumbail");

On the html page I then create the dataset and the gallery.
<table>
<tr spry:region="dsThumbnails" spry:repeat="dsThumbnails">
<td><img id="wp_{ds_RowID}" src="{path}"
onclick="grow_effect_{ds_RowID}.start(); return false;"/></td>
</tr>
</table>

Then I need to create the variable that represents the grow effect. I tried 2
different approaches:
1. Inside the spry:region, in the spry:repeat loop:
<table>
<tr spry:region="dsThumbnails" spry:repeat="dsThumbnails">
<td><img id="wp_{ds_RowID}" src="{path}"
onclick="grow_effect_{ds_RowID}.start(); return false;"/></td>
<script type="text/javascript">
var grow_effect_{ds_RowID} = new Spry.Effect.Grow("wp_{ds_RowID}",
{duration:1000, from:"100%", to:"20%", toggle: true});
</script>
</tr>
</table>

2. And at the end of the code, creating each variable manually:
<script type="text/javascript">
var grow_effect_0 = new Spry.Effect.Grow("wp_0", {duration:1000,
from:"100%", to:"20%", toggle: true});
...
var grow_effect_n = new Spry.Effect.Grow("wp_n", {duration:1000,
from:"100%", to:"20%", toggle: true});
</script>