logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 09-30-2008, 02:59 PM   #1
maguskrool
 
Join Date: Sep 2008
Posts: 3
Default 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.
maguskrool is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:07 AM.


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