This post is a bit obscure, but since I found very little information about this topic on the web, I wanted to share it for all.

Thickbox and Lightbox are great packages. Very powerful. Very elegant. Excellently scripted. Unfortunately, however, they don’t play nice together. Though Thickbox does in many respects supercede Lightbox, we needed both for a project. Turns out they’re incompatible with each other – or rather the libraries they depend on, Prototype and JQuery are incompatible – sort of.

Though this article was helpful (Using jQuery with Other Libraries), I couldn’t get it to work. Not sure why exactly, but I gave up trying to find a solution on the web and turned to the code itself. And then the solution presented itself – and it was easier than I thought – after jQuery loads, disable the use of “$” as a shortcut by implementing the jQuery.noConflict(); function and then redefine “$” in the Thickbox library. Worked great. Essentially we have something like this declared in our header:

<!– Lightbox and Thickbox Includes –>
<script type=”text/javascript” src=”path/to/lightbox/js/prototype.js”></script>
<script type=”text/javascript” src=”path/to/thickbox/js/jquery.js”></script>
<script type=”text/javascript”>jQuery.noConflict();</script>
<script type=”text/javascript” src=”path/to/thickbox/js/thickbox.js”></script>
<script type=”text/javascript” src=”path/to/lightbox/js/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”path/to/lightbox/js/lightbox.js”></script>

<link rel=”stylesheet” href=”path/to/thickbox/css/thickbox.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”path/to/lightbox/css/lightbox.css” type=”text/css” media=”screen” />
<!– End Lightbox and Thickbox Includes –>

And then in thickbox.js, modify all the calls to the jQuery shortcut by replacing the “$” with jQuery (43 instances). For example, the first line, $(document).ready(TB_init), becomes jQuery(document).ready(TB_init); That’s it. Prototype and jQuery are happy together. Questions? Email me.