Thickbox is a very nice javascript library based on jQuery (which is also a very neat library). It is used to show images and documents in a sort of popup like Lightbox does.

Let me sketch the problem:

1) I load my page (also loading thickbox.js)
2) I change my content in one dom-element, for example a div element, through Ajax.
3) Then I want to call thickbox on an element in the new div.

You will that see nothing happens, because Thickbox hasn’t been able to register this object.

So basically we need to reinitialize Thickbox.


Notice that you should download “thickbox.js” and not “thickbox-compressed.js” for this feature.

In thickbox.js there is a function tb_init(). This is called when the script is being loaded to add the click-events to the elements which have “thickbox” as class.

Recalling this function alone is not enough! Because in some cases elements will have two or more same click-events. It is better to remove the click-events first.

Add this to your thickbox.js:

1
2
3
4

function tb_reinit(domChunk) {
	$(domChunk).unbind("click");
	tb_init(domChunk);
}

And call this function whenever you load new content through Ajax which can possibly contain new Thickbox elements.

tb_reinit('a.thickbox, area.thickbox, input.thickbox');

Last but not least: Be careful when upgrading to a new version of thickbox, This was written for Thickbox version 3.1 .

And that’s it!

Hope this was useful.