jQuery Thickbox Issue

Question

Hi,

I'm a jQuery newb. I'm building a Online Shop and I'm using jQuery plugin 'Thickbox' (http://jquery.com/demo/thickbox). The Online Shop is set up to display a 'Enlarged Image' which runs the Thickbox JS script and shows an image.

A problem occurs as the data is placed on the page thru a CMS system (using Ajax I believe?). When you choose another product from the 'Choose Type' select drop down new data from the CMS system is placed on the page and the Thickbox script isn't applied as it can't see the new data.

I've been playing around with a fix I've found (http://www.codynolden.com/blog/2009/01/thickbox-and-ajax-using-livequery) but I can't seem to apply it to my website?

A live example of my site: http://madisonlane.businesscatalyst.com/_product_36331/AAA-_Autumn_Dress

Any ideas?

Answer 1

Are you using an IFRAMED thickbox? You may have better luck with that, since by default thickbox is just displayed in a DIV. You need to add &TB_iframe=true to your URL's querystring to get this

Answer 2

I may not be reading your question right, but from the way it sounds, content is being destroyed and created with new item selections, right?

If that's the case, you'll need to call tb_init('.some-selector') when you load new content. I recall having to do this for conditionally setting up a thickbox once. Thickbox works by going through your page and wiring up click events to link with class "thickbox." By using tb_init(), you can wire your stuff up at any time on any selector you like. Check out the source code for Thickbox to see what I mean.

Answer 3

in thickbox.js:

$(domChunk).click(function(){

was replaced with this:

$(domChunk).live(click, function(){