Integrating Thickbox and Lightbox Javascript Packages

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.

Be Sociable, Share!

About webadmin@brainspiral.com

Comments

2 Responses to “Integrating Thickbox and Lightbox Javascript Packages”
  1. TJ says:

    Hi, very useful post. Thanks!

  2. santiago says:

    thanks for the post !!
    regards
    Santiago

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!


eight − = 7