0

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?

3

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)
  • Thanks, but as the original post indicates, I've already tried the Jquery Multi module. – EmmyS Jul 24 '12 at 19:49
  • 1
    I am not seeing that you have wrapped your Drupal jQuery code in a targetting closure, so that the jQuery module can have effect. Here's a snippet from the module's readme.txt that target's jQuery 1.7.1 having been made available via the jqmulti module: (function($){ // your code here, using jQuery 1.7.1 })(jq171) – Amstercad Jul 26 '12 at 5:34
  • The idea is to let Drupal run at the stock, older version without breakage (which max's to version 1.3.2 only when you have the jquery update module installed), but when you need it, you want to load a targetted jquery version (like 1.7.1) for any given node-type which contains your javascript gizmo; but only then. jqmulti is just a sort of drupal module gui for non-coders. – Amstercad Jul 27 '12 at 9:42
  • Yes, I'm aware of that. I did try that after the original posting. It still doesn't work. I've posted on the module board at drupal.org and am talking with the developer. – EmmyS Jul 27 '12 at 13:48
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.

  • Not sure I understand. You're saying that if jquerytools requires something higher than 1.4.4 I can't use it because Drupal is stuck on an old version? – EmmyS Jul 12 '12 at 0:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.