JQuery Version Conflict

Question

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

Now I have run into a problem, basically the 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 one:

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

When both are enabled, only the thumbnail gallery works (because it's script import is done after the nivo's), when the 1.42 version is enabled only the Nivo works, and when only the 1.2.5 version is enabled only the Scrollable Gallery Works.

What should I do?

Answer 1

use this solution if you cannot use a single jQuery file for both the 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 a 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 use $ variable directly.

UPDATE: Based on your comment, following is the way to use it.

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

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

Answer 2

Jquery Tools website says that an upgrade is due out in just over a month bringing it in compliance up to Jquery 1.6.

That being said, there's a ton of different ways to skin this cat, and most aren't this behind the times. I've been using jQuery Infinite Carousel with great success. It looks and acts nearly identical and is written with no conflicts with the latest version of jQuery.

It wasn't clear from your posting, but I would avoid loading two different versions of Jquery if you're doing so. It's a TON of extra overhead that's really not helping your site at all.

Answer 3

Simple just copy & paste this java script code in your "HEAD" TAG

// jquery version conflict 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 it's work 110%..........................:) Enjoy!!!