How to integrate two independent jQuery libraries within a single page?

It has been long since my last post. That is not because I have nothing useful to write, but more likely that I am lazy to document interesting stuff I do…. Anyway, let’s go to the point!

Recently I had to integrate Lightbox 2 into a website that is run by a CMS. There was no possibility of FTP access, PHP source code access, … The only thing I could use was CMS’s static content form.

Surprisingly I could add the following code as a HTML form content:

<script type="text/javascript" src=""></script>
<script type="text/javascript">
// <![CDATA[
document.write("<link href='' rel='stylesheet' />");
// ]]>
<script type="text/javascript" src=""></script>

These lines just load appropriate jQuery library (currently 1.7.2, used by Lightbox 2), CSS styles and finally Lightbox’s JavaScript code. Due to the fact I could not insert link tags directly into the content, I accomplished this by printing the code using JavaScript. The latter does not influence on having multiple jQuery libraries on a page, but it needed to be done in my case and seems a nice workaround :).

The problem was that CMS is using jQuery of version 1.5.2, but Lightbox needed 1.7.2. Because I could not upgrade 1.5.2 version to the latest, I had to separate these two libraries. I also could not just simply override the old one because other parts of CMS generated page stopped working. This can be achieved by loading the second library into a variable. Into the upper javascript I added the following:

var $jq172 = jQuery.noConflict(true);

As you maybe know, the jQuery functions can be called by $(). After this command, the formerly loaded jQuery can be accessed through $() and last added library as $jq172(). If the parameter to the noConflict function is true, the previous library is intact, otherwise it is overwritten.

Lastly I needed to apply minor change to lightbox.js to instruct the script to use 1.7.2 library. Due to the nice coding style I just needed to change the line 46 into

$ = $jq172;

By applying all these I was able to have working Lightbox 2, working previous CMS scripts and having done everything without ant CMS code change. The Lightbox library can be then used completely normally.

Leave a Reply

Your email address will not be published. Required fields are marked *