Integrating Spry with Lightbox
“Spry”:http://labs.adobe.com/technologies/spry/home.html is a great Ajax library and is pretty easy to use but seeing as you do not have the images in the html at the time of rendering in the browser “Lightbox”:http://www.huddletogether.com/projects/lightbox2/ doesn’t have access to the current _a_ and _area_ tags in the page. So…what’s the solution?
Well, there are other ways you can make this happen but here is one:
bq. Spry.Utils.addLoadListener(function() { setTimeout(function() { myLightbox.updateImageList(); }, 1000); });
Basically add a listener so when the data is loaded simply tell _myLightbox_ to update the image list (which is the function that parses the DOM) after 1 second (1000 milliseconds), just to give Spry enough time to render the html. _myLightbox_ is the instance name Lightbox.js creates for the Lightbox instance.
Feel free to explore other ways for adding listeners/observers to Spry and post them. I didn’t find much in Google so I figured I’d post my quick fix.
February 27th, 2008 at 12:38 pm
Hey John,
Most of the ‘box kits automatically fire off their initialization functions on DOMReady or onload. Unfortunately that is usually before Spry has had a chance to pre-process the regions on the page that may contain the images/content you want the ‘box kit to use.
To sync things up, you probably want to use an onPostUpdate observer on the region that contains the content, instead of an observer on the data set.
See this Spry Pre-Release forum post for more details:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid=1339767&enterthread=y
–== Kin ==–
February 27th, 2008 at 1:33 pm
Good deal Kin. I figured there was a better way and but I didn’t find a good reference to all of the events and when they are called.
April 20th, 2008 at 8:16 am
Hi, Could you explain where exactly this piece of code needs to go to get this to work?
I’m experiencing the same problem but don’t know where to add this code to correct it.
Thanks, Richard
April 20th, 2008 at 9:53 am
It should go in your JS file or in your html/head/script tag block. This code is basically setting an event listener and once the data comes back it waits 1 second to tell Lightbox to run.
Look at Kin’s comment as well. He has a link to a forum post and gives another way of doing it.
Hope it helps.
Thanks.
October 18th, 2009 at 5:18 pm
Hi there – I'm using http://fancybox.net/ as my lightbox solution. Can you tell me what to put in my html / head / script tag block to make it work? Thanks in advance!
Perry
October 18th, 2009 at 7:56 pm
Hey Perry, check the Usage page on the fancy box site: http://fancybox.net/howto.
It goes through the steps for adding it to your site.
In short, just put the javascript and css lines of code in the head tag of your html.
March 6th, 2010 at 4:14 pm
I'm looking for a way to incorporate a lightbox within a spry dataset. I'm using one of the Dreamweaver CS4 templates that pulls the data in from a XML. The template I'm using is the one with the button on the left and the content areas is on the right. I'm trying to dynamically load a video that gets it's location from the XML file. Would like this video to load into the light box. Every solution I try it just opens the image in another window, without loading the lightbox.
March 6th, 2010 at 6:20 pm
You might want to try out colorbox. I used that yesterday and it worked really well for video.
http://colorpowered.com/colorbox/