How to Use Multiple JQuery on the same page

Every web owners would like their webpages to look good. More often than not, when you add some eye-candy application like Sliders and Lightbox, you would want to add more. And not realizing that some programs have gone into conflict. The best way to use some awesome scripts is using Jquery. But then some scripts use different versions of Jquery and not using the appropriate one will jeopardize your webpage.

I'm using 2 different Jquery versions for Nivo Slider, my Blogger pager and Social Tab Sliders.

Normally, The codes look like this:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/> <script type='text/javascript'> $(window).load(function() { $(&#39;#slider&#39;).nivoSlider({         effect: &#39;fade&#39;,         animSpeed: 500,         pauseTime: 3500     }); }); </script>  
<script type='text/javascript'> if (typeof jQuery == &#39;undefined&#39;){document.write(unescape(&quot;%3Cscript src=&#39;https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js&#39; type=&#39;text/javascript&#39;%3E%3C/script%3E&quot;));}</script><script src='http://mybloggerlab.com/Scripts/MBL-slideshow.js'/>
The Blue code is for Nivo Slider while the Red one is for the Social Tab Slider. And leaving the codes just like that would not generate both.

Now we'll use noConflict().

The new codes appear like this:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>          var $jq = jQuery.noConflict();   </script> <script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/> <script type='text/javascript'> $jq(window).load(function() { $jq(&#39;#slider&#39;).nivoSlider({         effect: &#39;fade&#39;,         animSpeed: 500,         pauseTime: 3500     }); }); </script>  
<script type='text/javascript'> if (typeof jQuery == &#39;undefined&#39;){document.write(unescape(&quot;%3Cscript src=&#39;https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js&#39; type=&#39;text/javascript&#39;%3E%3C/script%3E&quot;));}</script><script src='http://mybloggerlab.com/Scripts/MBL-slideshow.js'/>
And you can see the highlighted addition. You have to declare the other Jquery in noConflict() with a different variable. I chose jq since it's common among other users, obviously stands for jquery. So for that code I used with the older Jquery, I had to change the call for $ within the script of that old JQuery which is now $jq. Since I'm using only 2 jquery, I only have to change 1 script and no need to change the newer version which is why nothing changed with the Red one.

Also, if you are using the same JQuery version (like 1.7.1) for say 3 different scripts, you also have to change the call sign $ to the changed one $jq to the other 3 scripts. In my case, the script for my Blogger pager. Part of the code is shown:

<script type="text/javascript">
$jq(document).ready(function(){ 
var newerLink = $jq("a.blog-pager-newer-link").attr("href"); 
$jq("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { 
var newerLinkTitle = $jq("a.blog-pager-newer-link").text();
.... some codes here ...
</script> 
Likewise, you can apply another variable for another JQuery version, say $jq2.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>          var $jq2 = jQuery.noConflict();   </script> <script src='WHATEVER_JQUERY.pack.js' type='text/javascript'/> <script type='text/javascript'> $jq2(window).load(function() {    // some codes here
... and $jq3 for another version and so on and so forth (Just don't overdo using so many Jqueries as your page might take too much time to load).

I hope this is of help.