Back To Website Design Forum

Gallery using spry grow effect that targets the clicked thum

  • maguskrool
  • Born
  • Born
  • No Avatar
  • Joined: May 29, 2008
  • Posts: 3
  • Status: Offline

Post September 30th, 2008, 7:01 am

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: [ Select ]
 
<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>
 
  1.  
  2. <thumbnail_list>
  3.    <thumbnail>
  4.       <path>images/1.jpg</path>
  5.       <caption>some text</caption>
  6.    </thumbnail>
  7.    ...
  8.    <thumbnail>
  9.       <path>images/n.jpg</path>
  10.       <caption>some text</caption>
  11.    </thumbnail>
  12. </thumbnail_list>
  13.  


On the html page I then create the dataset and the gallery.
Code: [ Select ]
 
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>
 
  1.  
  2. dataset:
  3. var dsThumbs = new Spry.Data.NestedXMLDataSet(dsThumbs, "thumbnail_list/thumbail");
  4.  
  5. gallery:
  6. <table>
  7.    <tr spry:region="dsThumbnails" spry:repeat="dsThumbnails">
  8.       <td><img id="wp_{ds_RowID}" src="{path}" onclick="grow_effect_{ds_RowID}.start(); return false;"/></td>
  9.    </tr>
  10. </table>
  11.  


Then I need to create the variable that represents the grow effect. I tried 2 different approaches:
Code: [ Select ]
 
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>
 
  1.  
  2. 1. Inside the spry:region, in the spry:repeat loop:
  3. <table>
  4.    <tr spry:region="dsThumbnails" spry:repeat="dsThumbnails">
  5.       <td><img id="wp_{ds_RowID}" src="{path}" onclick="grow_effect_{ds_RowID}.start(); return false;"/></td>
  6.       <script type="text/javascript">
  7.          var grow_effect_{ds_RowID} = new Spry.Effect.Grow("wp_{ds_RowID}", {duration:1000, from:"100%", to:"20%", toggle: true});
  8.       </script>
  9.    </tr>
  10. </table>
  11.  
  12. 2. And at the end of the code, creating each variable manually:
  13. <script type="text/javascript">
  14.    var grow_effect_0 = new Spry.Effect.Grow("wp_0", {duration:1000, from:"100%", to:"20%", toggle: true});
  15.    ...
  16.    var grow_effect_n = new Spry.Effect.Grow("wp_n", {duration:1000, from:"100%", to:"20%", toggle: true});
  17. </script>
  18.  


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.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 30th, 2008, 7:01 am

Page 1 of 1

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 74 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.