If you've ever tried to use Spry data sets with a default implementation of Thickbox (a jQuery-based version of the familiar Lightbox), you've probably noticed that it doesn't work.

The reason for this, of course, is simple: out of the gates, thickbox.js fires off an initialization function (tb_init) through jQuery's ready().  What this means, technically, is that thickbox has already started its processing and element fishing before Spry's data sets have been fully loaded and rendered.  What this means, practically, is that Thickbox won't work.

Though frustrating, there is a fairly simple way to work around this.  

Conceptually, what we'll be doing is to bypass jQuery's ready() function and load tb_init manually AFTER we know Spry's data sets have fully loaded and rendered.

First, we need to figure out when the data sets are done processing.  This is pretty simple, because Spry comes with a handy way of sniffing this out.

We'll start by setting up a new data region observer.  Our observer will watch the data set and when it reaches the "state" that we define, we can manually fire the thickbox.js processing.

So here's our new observer:

the_Observer= new Object()
the_Observer.onPostUpdate = function() {
   // Here's where the thickbox function call will go…    
};

Spry.Data.Region.addObserver("the_region", the_Observer);

Nothing too complicated here.  We create a new Spry region observer, tell it to watch for the "onPostUpdate" state, and then we can load in whatever processing we want to the function we've defined for that state.

The next step, then, is to load in the thickbox initialization function.

To do this, start by going to the thickbox.js file.  Copy the following lines:

tb_init('a.thickbox, area.thickbox, input.thickbox');
imgLoader = new Image();// preload image
imgLoader.src = tb_pathToImage;

Once you have them copied, go ahead and comment out the entire $(document).ready function, including the lines you just copied.  Save and close.

Go back to your other page and paste the three lines into our observer function.  The final result will look something like this:

the_Observer= new Object()
the_Observer.onPostUpdate = function() {
    // See?  Here's the init function for thickbox…
    tb_init('a.thickbox, area.thickbox, input.thickbox');
     imgLoader = new Image();// preload image
     imgLoader.src = tb_pathToImage;
};

Spry.Data.Region.addObserver("products", the_Observer);

That's all there is to it.  Now your Thickbox content should work correctly.