I am trying to put nivo-slider on my drupal home page. Although all images are showing but they are not sliding and when I check consol, I see an error in nivo-slider.js file i.e.

"Uncaught TypeError: undefined is not a function"

My nivo-slider.js code is-

(function ($) {
  Drupal.behaviors.nivoSlider = {
    attach: function (context, settings) {
      // Initialize the slider
      $('#slider').nivoSlider({ *//here I am getting error mentioned above*
        'effect': Drupal.settings.nivo_slider.effect, // Specify sets like: 'fold,fade,sliceDown'
        'slices': Drupal.settings.nivo_slider.slices, // For slice animations
        'boxCols': Drupal.settings.nivo_slider.boxCols, // For box animations
        'boxRows': Drupal.settings.nivo_slider.boxRows, // For box animations
        'animSpeed': Drupal.settings.nivo_slider.animSpeed, // Slide transition speed
        'pauseTime': Drupal.settings.nivo_slider.pauseTime, // How long each slide will show
        'startSlide': Drupal.settings.nivo_slider.startSlide, // Set starting Slide (0 index)
        'directionNav': Drupal.settings.nivo_slider.directionNav, // Next & Prev navigation
        'directionNavHide': Drupal.settings.nivo_slider.directionNavHide, // Only show on hover
        'controlNav': Drupal.settings.nivo_slider.controlNav, // 1,2,3... navigation
        'controlNavThumbs': Drupal.settings.nivo_slider.controlNavThumbs, // Use thumbnails for Control Nav
        'pauseOnHover': Drupal.settings.nivo_slider.pauseOnHover, // Stop animation while hovering
        'manualAdvance': Drupal.settings.nivo_slider.manualAdvance, // Force manual transitions
        'prevText': Drupal.settings.nivo_slider.prevText, // Prev directionNav text
        'nextText': Drupal.settings.nivo_slider.nextText, // Next directionNav text
        'randomStart': Drupal.settings.nivo_slider.randomStart, // Start on a random slide
        'beforeChange': Drupal.settings.nivo_slider.beforeChange, // Triggers before a slide transition
        'afterChange': Drupal.settings.nivo_slider.afterChange, // Triggers after a slide transition
        'slideshowEnd': Drupal.settings.nivo_slider.slideshowEnd, // Triggers after all slides have been shown
        'lastSlide': Drupal.settings.nivo_slider.lastSlide, // Triggers when last slide is shown
        'afterLoad': Drupal.settings.nivo_slider.afterLoad // Triggers when slider has loaded
      });
    }
  };
}(jQuery));

Help me to sought out this error..thanks!!

I am trying to put nivo-slider on my drupal home page. Although all images are showing but they are not sliding and when I check consol, I see an error in nivo-slider.js file i.e.

"Uncaught TypeError: undefined is not a function"

My nivo-slider.js code is-

(function ($) {
  Drupal.behaviors.nivoSlider = {
    attach: function (context, settings) {
      // Initialize the slider
      $('#slider').nivoSlider({ *//here I am getting error mentioned above*
        'effect': Drupal.settings.nivo_slider.effect, // Specify sets like: 'fold,fade,sliceDown'
        'slices': Drupal.settings.nivo_slider.slices, // For slice animations
        'boxCols': Drupal.settings.nivo_slider.boxCols, // For box animations
        'boxRows': Drupal.settings.nivo_slider.boxRows, // For box animations
        'animSpeed': Drupal.settings.nivo_slider.animSpeed, // Slide transition speed
        'pauseTime': Drupal.settings.nivo_slider.pauseTime, // How long each slide will show
        'startSlide': Drupal.settings.nivo_slider.startSlide, // Set starting Slide (0 index)
        'directionNav': Drupal.settings.nivo_slider.directionNav, // Next & Prev navigation
        'directionNavHide': Drupal.settings.nivo_slider.directionNavHide, // Only show on hover
        'controlNav': Drupal.settings.nivo_slider.controlNav, // 1,2,3... navigation
        'controlNavThumbs': Drupal.settings.nivo_slider.controlNavThumbs, // Use thumbnails for Control Nav
        'pauseOnHover': Drupal.settings.nivo_slider.pauseOnHover, // Stop animation while hovering
        'manualAdvance': Drupal.settings.nivo_slider.manualAdvance, // Force manual transitions
        'prevText': Drupal.settings.nivo_slider.prevText, // Prev directionNav text
        'nextText': Drupal.settings.nivo_slider.nextText, // Next directionNav text
        'randomStart': Drupal.settings.nivo_slider.randomStart, // Start on a random slide
        'beforeChange': Drupal.settings.nivo_slider.beforeChange, // Triggers before a slide transition
        'afterChange': Drupal.settings.nivo_slider.afterChange, // Triggers after a slide transition
        'slideshowEnd': Drupal.settings.nivo_slider.slideshowEnd, // Triggers after all slides have been shown
        'lastSlide': Drupal.settings.nivo_slider.lastSlide, // Triggers when last slide is shown
        'afterLoad': Drupal.settings.nivo_slider.afterLoad // Triggers when slider has loaded
      });
    }
  };
}(jQuery));

Help me to sought out this error..thanks!!

• javascript
• jquery
• drupal
• nivo-slider

• Can you give the line of the error from your console ? – YannPl Commented Apr 18, 2014 at 7:42
• 1 Seems fine, make sure you imported the drupal nivo_slider plugin before you run this. – bobthedeveloper Commented Apr 18, 2014 at 7:45
• Yes I have imported it in module folder. – shashank Commented Apr 18, 2014 at 7:46
• Include jquery.js main file very first in head – Pratik Joshi Commented Apr 18, 2014 at 7:47
• Its JS error ,has nothing to do with Rupal framework – Pratik Joshi Commented Apr 18, 2014 at 7:49

5 Answers 5

Include jquery.js main file in header before any js

<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

When you use two different versions of jquery (which is not remended), you can use jQuery.noConflict

 api.jquery./jQuery.noConflict/

I had encountered a similar problem before. This issue can be fixed by making use of Jquery Update module in Drupal 7 & setting the version of jquery library to 1.9 & above.

Do let me know in case of any doubts

Also please note that in Drupal you should never add Jquery library explicitly because Drupal core by default adds a jquery library.

When you try to add a jquery.js in the head <script src="http://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>

There will be 2 jquery libraries now & which will conflict.

So we need to use jquery update module to upgrade the library

Another likely candidate is referring to jQuery with $ (dollar):

  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#main-content").fitVids();
  });

If you instead use the no-conflict reference in your script, as below, this may fix the error

jQuery(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    jQuery("#main-content").fitVids();
  });

I just ran into some issues configuring Nivo View Slider on Drupal 7. I didn't read the module's documentation at first but it looks like Nivo Slider's library isn't included in the package, you need to upload it manually to your server. Here is the documentation : https://www.drupal/project/views_nivo_slider To sum it up :

1. install/enable Library API
2. download Nivo Slider libs from https://github./gilbitron/Nivo-Slider/downloads
3. unzip the archive to sites/all/libraries/nivo-slider

At step 2, you'll have to choose between version 2.x or 3.x On the module's project page, it says that version 3.x might be broken on Google Chrome, I didn't have any issue myself...