Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   Spry (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=189)
-   -   Gallery using spry grow effect that targets the clicked thumbnail (http://www.dreamweaverclub.com/forum//showthread.php?t=28990)

maguskrool 09-30-2008 02:59 PM

Gallery using spry grow effect that targets the clicked thumbnail
 
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:
Code:

<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.
Code:

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:
Code:

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.


All times are GMT. The time now is 03:00 PM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com