|
JavaScript Library conflicts when using more than one at the same time |
||||||||
Whilst building a new piece of functionality I have been trying to combine a JQuery carousel plug-in and the lightview prototype plug-in. This threw up an unexpected issue. Both libraries map the dollar ($) as their shortcut indicator. JQuery uses "$" as a shortcut as a replacement for "jQuery" and Prototype uses "$" as well.
It turns out that there is a JQuery command for exactly this issue. Wherever you include the JQuery library reference add another script code. The noConflict function maps which character you tell it as the short name for "JQuery".
1<s/cript src="http://www.google.com/jsapi" type="text/javascript"></script>
2<s/cript type="text/javascript" charset="utf-8">
3 google.load("jquery", "1.3");
4</script>
5
6<s/cript>
7 jQuery.noConflict();
8 var J = jQuery;
9</script>
2<s/cript type="text/javascript" charset="utf-8">
3 google.load("jquery", "1.3");
4</script>
5
6<s/cript>
7 jQuery.noConflict();
8 var J = jQuery;
9</script>
Just remember to change your references to JQuery from "$" to "J", or whatever you assign it to.
1J(document).ready(function(){
2code
3});
2code
3});
Now both the Libraries can load into different namespaces.
TweetBacks
On a side note, why not use jQuery's lightbox plugin?
I have tried to use the prettyPhoto plugin, but it only supported iamges, rather than html content or an iframe.
I'll look for a JQuery based lightbox plugin, maybe that will solve an issue I'm having with it, as any scrollable objects not displayed onload do not work as lightbox links.