Gallery using spry grow effect that target the clicked thumbnail

[maguskrool]

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.

Here's my code. 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>

On the html page I then create the dataset and the gallery.

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

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>

None of these worked, and I guess I understand why in the 1st approach. The 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.

http://www.vivoeusebio.com