PDA

View Full Version : Gallery using spry grow effect that targets the clicked thumbnail


maguskrool
09-30-2008, 02:59 PM
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.