CODEWITHSUNDEEP
javascriptjquerydrupalnivo-slider
shashank
shashank

Reputation: 566

Getting Uncaught TypeError: undefined is not a function in nivo slider.js

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));

here is the error in my consol

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

Upvotes: 1

Views: 16880

Answers (5)

paulgv
paulgv

Reputation: 1828

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.org/project/views_nivo_slider To sum it up :

  1. install/enable Library API
  2. download Nivo Slider libs from https://github.com/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...

Upvotes: 0

autopoietic
autopoietic

Reputation: 197

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();
  });

Upvotes: 0

Amey Mudras
Amey Mudras

Reputation: 185

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.com/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

Upvotes: 0

Amey Mudras
Amey Mudras

Reputation: 185

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

Upvotes: 1

Pratik Joshi
Pratik Joshi

Reputation: 11693

Include jquery.js main file in header before any js

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

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

 api.jquery.com/jQuery.noConflict/

Upvotes: 1

Related Questions