JQuery Version Conflict

Question

I am trying to use the Nivo JQuery Slider (http://nivo.dev7studios.com/) and the scrollable gallery (http://flowplayer.org/tools/demos/scrollable/index.html).

Now I run into a problem, mainly Nivo Slider uses this jQuery library:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 

and the scrollable gallery uses this:

 <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> 

When both options are enabled, only the thumbnail gallery works (because the script is imported after nivo), when version 1.42 is enabled only for Nivo, and when only version 1.2.5 is enabled, only scrollable gallery works.

What should I do?

Answer 1

use this solution if you cannot use one jQuery file for both plugins:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var jQuery_1_4_2 = jQuery.noConflict(); </script> <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> 

To use jQuery 1.4.2, put the code using it in SEF (Self Executing Function), like this:

 (function($){ //code using jQuery 1.4.2 //here the $variable will be the jQuery object of 1.4.2 })(jQuery_1_4_2) 

For jQuery 1.2.5, you can directly use the $ variable.

UPDATE: Based on your comment, the following use case.

If you want to use jQuery 1.4.2, use the jQuery_1_4_2 object
For example: jQuery_1_4_2("#abc").slider(options)

If you want to use jQuery 1.2.5, use a $ or jQuery object
For example: $("#abc").scrollable(options)

Answer 2

The JQuery Tools website says the update will take just over a month, bringing it to jQuery 1.6 compliance.

This suggests that there are a ton of different ways to skin this cat, and most of them are not behind the times. I have used jQuery Infinite Carousel with great success. It looks and acts almost identically and is written without conflict with the latest version of jQuery.

This was not clear from your post, but I would not download two different versions of jQuery if you do. This is a TON of extra overhead that really doesn't help your site at all.

Answer 3

Just copy and paste this java script code into TAG

// jquery version error code

  var newJQuery = jQuery.noConflict(true), oldJQuery = jQuery; (function ($) { // code that needs 1.4.2 goes here }(newJQuery)); (function ($) { // code that needs 1.2.6 goes here }(oldJQuery)); // code that needs oldJQuery and newJQuery can go here 

and see how 110% works .......................... :) Enjoy !!!