Looping Spry values into Javascript...

I'm a somewhat of a novice but I do this is elementary for
someone to help me with.



I've loaded an XML file bound to a Spry object. However, I'd
like to pass repeating values within the object to a Javascript
array for use in a function.



I've defined my array early on:

%26lt;script type=''text/javascript%26gt;

var dsGallery = new Spry.Data.XMLDataSet(''gallery.xml'',
''gallery'');

var dsPhotos = new Spry.Data.XMLDataSet(''gallery.xml'',
''gallery/photo'');

var galleryArray = new Array();

%26lt;/script%26gt;



and later on in a repeating Spry element, I have nested
within it:

%26lt;script type=''text/javascript''%26gt;

galleryArray.push('{name}');

%26lt;/script%26gt;



However, the array comes up empty. I've even put the .push
action into a Spry element that has spry:state=''ready''.



I'm thinking that perhaps I'm not approaching some event
properly. Do I need an event handler of some kind? Whether it's in
what I'm doing now or in something else I need to do (maybe a JS
function that maps directly from the Spry object into the array?).



I'm pretty much at a loss here. Help much appreciated.



thanks and regards,

VictorLooping Spry values into Javascript...
Hi Victor,



I'd have to see your region markup and how you declare your
galleryArray in context to figure out what is going on.



That said, you do know that you can get the names directly
out of the dsGallery, without resorting to creating another array?
You can do something like this:



var rows = dsGallery.getData();

rows[ 0 ].name; // The name stored in the first row.

rows[ rows.length - 1 ].name; // The name stored in the last
row.



--== Kin ==--Looping Spry values into Javascript...
Thanks, Kim - that got me on the right track, combined with
another reply of yours about using an event observer (link
here
for completeness).



In any case, my goal was to link a lightbox script
(specifically slimbox) with Spry. This seemed to do the trick.
Unfortunately, I don't have the time right now to do a Spry version
of lightbox but for anyone who's trying to integrate the two, I
hope this followup helps. This may actually be a first seeing I
wasn't able to google a solution directly.



Keep in mind that I'm still a novice so I'm more a MacGyver
than a Stephen Hawking when it comes to coding.



I wasn't able to use the rel=''lightbox[galleryname]'' - I
believe the libraries conflict with each other in some way but I
haven't investigated beyond the inability to parse the 'rel'
attribute. I used a javascript onclick function instead. The
trouble is that it works great on single images. The challenge is a
way to use JS to bind all related images in a gallery.



Luckily Chris Beyls, author of Slimbox posted a method:



%26lt;script type=''text/javascript''%26gt;

function openGallery1() {

return Lightbox.open([['url1', 'caption1'], ['url2',
'caption2'], ['url3', 'caption3']], 0);

}

%26lt;/script%26gt;



With the activating link being:



%26lt;a href=''#'' onclick=''return openGallery1()''%26gt;Click
me%26lt;/a%26gt;



Here's where the fun stuff with Spry comes in.



You'll need to push your Spry data into the openGallery
function. Part of it requires us to have a Spry observer so that
the pushing happens after the XML has loaded. You can probably skip
using the galleryArray intermediate by combining the postload
process with the openGallery function but I just wanted to keep it
nice and easy to follow (for me, especially!).



My XML looks something like this:



%26lt;?xml version=''1.0'' encoding=''UTF-8'' standalone=''yes''?%26gt;

%26lt;gallery xmlns:xsi=''
http://www.w3.org/2001/XMLSchema-instance''%26gt;

%26lt;photo id=''001''%26gt;

%26lt;caption%26gt;Frank and Jean at the beach%26lt;/caption%26gt;

%26lt;filename%26gt;../img/photos2006_001.jpg%26lt;/filename%26gt;

%26lt;thumb%26gt;../img/photos2006_001th.jpg%26lt;/thumb%26gt;

%26lt;/photo%26gt;

...

%26lt;/gallery%26gt;



So my javascript looks like this:



%26lt;script type=''text/javascript''%26gt;

var dsPhotos = new Spry.Data.XMLDataSet(''gallery2006.xml'',
''gallery/photo'');

var galleryArray = new Array();

var obs = {};

obs.onPostLoad = function() {

var rows = dsPhotos.getData();

for (var k=0; rows %26amp;%26amp; k%26lt;rows.length; k++) {

galleryArray.push ([rows[k].filename, rows[k].caption])

}

}

dsPhotos.addObserver(obs);



function openGallery(idx) {

return Lightbox.open(galleryArray, idx);

}

%26lt;/script%26gt;



Now, my onClick handler looks like this:



%26lt;div id=''thumbnails'' spry:repeatchildren=''dsPhotos''%26gt;

%26lt;div%26gt;%26lt;a href=''#'' onclick=''return
openGallery({@id}-1);''%26gt;%26lt;img src=''{thumb}'' alt=''{caption}''
width=''120'' height=''120'' /%26gt;%26lt;/a%26gt;%26lt;/div%26gt;

%26lt;/div%26gt;



Presto, it looks pretty snazzy if I may say so, myself. A
couple of notes: I had some consistent sizes for my photos and all
my photos were parsed from the same XML file. The '{@id}-1' is used
to match up the Spry id position to my galleryArray index; Spry ids
start at 001 while my galleryArray starts at 0. No problem...
light/slimbox still indicates the correct number of photos based on
the array length.



Hope that helps someone else out, and thanks again, Kim.

Victor

eye look