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="http://zitnik.si/temp/lightbox/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
// <![CDATA[
document.write("<link href='http://zitnik.si/temp/lightbox/css/lightbox.css' rel='stylesheet' />");
// ]]>
</script>
<script type="text/javascript" src="http://zitnik.si/temp/lightbox/js/lightbox.js"></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.