6

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?

Brandon
  • 68,708
  • 30
  • 194
  • 223
Ryan S
  • 3,210
  • 17
  • 48
  • 79
  • 1
    Maybe a duplicate of http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page – Yet Another Geek Jun 13 '11 at 14:56
  • 1
    Try altering when each .js file is loading while using one jQuery version that is compatible with both. – ngen Jun 13 '11 at 14:57
  • A library that insists on version 1.2.5 is something I'd be very careful with - that's a really old version, so if that plugin hasn't been updated beyond that it's just going to get worse in the future. There are like a billion image gallery plugins to choose from, so it should be possible to find something that's more actively maintained. – Pointy Jun 13 '11 at 15:03
  • Thanks for your comments guys. @ngen how do you alter when they load? @Yet Another Geek Ty I will read his question too – Ryan S Jun 13 '11 at 15:06

3 Answers3

10

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)

sv_in
  • 13,929
  • 9
  • 34
  • 55
  • I'm not really familiar with JQuery, and I didn't really understand what I need to do in the second part. – Ryan S Jun 14 '11 at 12:04
  • Updated my answer but still it is better to have only one version of JQuery in a webpage – sv_in Jun 14 '11 at 16:15
  • thanks, so that basically uses a particular jquery library depending on the div you want – Ryan S Jun 15 '11 at 10:11
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.

bpeterson76
  • 12,918
  • 5
  • 49
  • 82
  • thanks, I decided to go for this carousel, and it's looking fine. Should be a worth while upgrade, thanks. – Ryan S Jun 14 '11 at 12:49
1

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!!!

Alpesh Panchal
  • 59
  • 8