Possible conflict with multiple jquery plugins

Question

I have a custom module that uses the jCarousel jquery plugin (not the Drupal module). The module code up to this point works correctly, and looks like this (only the main function included for brevity.)

function speaker_carousel_block_view($delta = '') {
 switch($delta){
    case 'speaker_carousel':
      drupal_add_js('sites/all/libraries/jcarousel/lib/jquery.jcarousel.min.js');
      drupal_add_css('sites/all/libraries/jcarousel/skins/speakers/jcarousel-speakers.css');

     drupal_add_js(
       'jQuery.noConflict();
            (function($) {
              $(document).ready(function() {
                 jQuery("#mycarousel").jcarousel({wrap: "circular"});
                });
            })(jQuery);',
       'inline'

     );

        $block_content = "";
        //Use our custom function to retrieve data.
        $result = speaker_carousel_get_data();

        //parse into html
        $block_content .= '<ul id="mycarousel" class="jcarousel-skin-speakers">';
        $block_content .= speaker_carousel_create_html($result);
        $block_content .= '</ul>';

        $block['content'] = $block_content;
  }
  return $block;
}

I'm now trying to incorporate a second plugin ([jquery tools tooltip])2 to handle a mouseover popup of some text. This is what the function looks like after additions:

function speaker_carousel_block_view($delta = '') {
 switch($delta){
    case 'speaker_carousel':
      drupal_add_js('sites/all/libraries/jcarousel/lib/jquery.jcarousel.min.js');
      drupal_add_css('sites/all/libraries/jcarousel/skins/speakers/jcarousel-speakers.css');
      drupal_add_js('http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js', 'external');

     drupal_add_js(
       'jQuery.noConflict();
            (function($) {
              $(document).ready(function() {
                 jQuery("#mycarousel").jcarousel({wrap: "circular"});
                 jQuery("#mycarousel img").tooltip();
                });
            })(jQuery);',
       'inline'

     );
        $block_content = "";
        //Use our custom function to retrieve data.
        $result = speaker_carousel_get_data();

        //parse into html
        $block_content .= '<ul id="mycarousel" class="jcarousel-skin-speakers">';
        $block_content .= speaker_carousel_create_html($result);
        $block_content .= '</ul>';

        $block['content'] = $block_content;


  }
  return $block;
}

As soon as I add the second drupal_add_js() call in (to the cdn.jquerytools.org site), everything blows up. The carousel no longer displays correctly; it just shows a single item instead of the horizontally scrolling strip of images that was there before. Any idea how I can get the two to play nicely together?

---

I found the JQuery Multi module, which I really thought would help. I installed and configured, and now the carousel no longer blows up, but I get an error in Firebug console:

jQuery("#mycarousel a.speaker_trigger").tooltip is not a function
jQuery("#mycarousel a.speaker_trigger").tooltip();

I know it's not an issue with the two plugins working together, because I copied the rendered source into a static HTML file and put it here. It works fine, but it's only using a single version of jquery.

Do you have any idea?

Answer 1

You can run two separate versions of jQuery, which is what your situation seems to require.

This module offers hope to an easy resolution . https://drupal.org/project/jqmulti

Otherwise this document offers more clarity: https://drupal.org/node/1058168

Generally speaking, you only need a single instance of jQuery installed on the server, which might be called from many different scripts scattered all over the place. However sometimes you'll have a requirement for jQuery more recent than your current stock-Drupal installation. This is when you want to run multiple jQuery versions (because you don't want to simply upgrade your single instance, which would break standard Drupal jQuery stuff like the admin-menu).

(function($){ 
    // your code here, using jQuery 1.7.1 setup w/ jqmulti module
    alert("jQuery version = " + $().jquery); //proves jquery version being used
})(jq171)

Answer 2

jquerytools includes jquery so you are calling jquery 2 times (if i'm not wrong you are calling the full jquerytools file).

You should download a version without jquery and link that one.

Beware: Drupal jquery is version 1.4.4 (1.5.2 with jquery update). I remember jquerytools depending on jquery 1.6.x (not sure) so check for jquerytools requirements.