Nivo slider not working

  • The following code worked in a flatfile html, but when added to WordPress CMS, it fails. What is wrong with this code. Is WordPress known to have issues with Nivoslider?

    $(“#slider”).nivoSlider is not a function
    afterLoad: function(){} // Triggers when slider has loaded

    Here are some relevant part of the code:

    <link href=”css/styles.css” rel=”stylesheet” type=”text/css” />
    <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script&gt;
    <script type=”text/javascript” src=”js/jquery.prettyPhoto.js”></script>
    <link rel=”stylesheet” href=”css/prettyPhoto.css” />
    <link rel=”stylesheet” href=”css/nivo-slider.css” type=”text/css” media=”screen” />
    <script src=”js/jquery.nivo.slider.pack.js” type=”text/javascript”></script>

    <script type=”text/javascript”>
    $(window).load(function() {
    $(‘#slider’).nivoSlider({
    effect: ‘fade’, // Specify sets like: ‘fold,fade,sliceDown’
    slices: 15, // For slice animations
    boxCols: 8, // For box animations
    boxRows: 4, // For box animations
    animSpeed: 500, // Slide transition speed
    pauseTime: 2000, // How long each slide will show
    startSlide: 0, // Set starting Slide (0 index)
    directionNav: false, // Next & Prev navigation
    directionNavHide: true, // Only show on hover
    controlNav: true, // 1,2,3… navigation
    controlNavThumbs: false, // Use thumbnails for Control Nav
    pauseOnHover: true, // Stop animation while hovering
    manualAdvance: false, // Force manual transitions
    prevText: ‘Prev’, // Prev directionNav text
    nextText: ‘Next’, // Next directionNav text
    randomStart: false, // Start on a random slide
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
    });
    });
    </script>

    <!– Slider starts here –>
    <div class=”slider-wrapper”>
    <div id=”slider” class=”nivoSlider”>
    <img src=”slider/slide1.png” align=”slide 1″ />
    <img src=”slider/slide2.png” align=”slide 2″ />
    </div>
    </div>
    <!– Slider ends here –>

    Files exist in hard drive, and folder path is correct.

Viewing 5 replies - 1 through 5 (of 5 total)
  • wpismypuppet

    (@wordpressismypuppet)

    In my experience, it’s usually jQuery that’s the problem in WordPress… and it’s not really a “problem” per say… What happens is WordPress likes to play with all types of javascript libraries. In order to be compatible with them all, it is very strict in how it handles things.

    jQuery has a shortcode to access it’s functions quickly. This shortcode is the dollar sign $. So, you can change jQuery(somecodehere) to $(somecodehere) to save on typing. But, many other javascript (and other languages) also use the dollar sign. So WordPress will not allow the $, it only allows jQuery, to stay compatible with other libraries.

    Since the NivoSlider has written it’s code with the $, and not jQuery, it would be impractical for you to go through their code and change all $ to jQuery… instead, read this:

    https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script

    Scroll down to the “jQuery noConflict wrappers” section since most of the rest of it is irrelevant to your problem.

    You can also read up on this, if you have time to kill:

    https://docs.jquery.com/Using_jQuery_with_Other_Libraries

    I am getting this error with NSlider in WordPress IIS localhost:
    local/host/wordpress

    Timestamp: 21/04/2013 18:16:39
    Error: TypeError: jQuery(…).nivoSlider is not a function

    Source File: https://localhost/wordpress/
    Line: 206 afterLoad: function(){} // Triggers when slider has loaded

    I’m not sure whether it is jQuery loading twice (so much conflicting advice re using jQuery & WP on Google! & the WP Codex not exactly clear/definitive with this) or problem with NS code eg

    jQuery(window).load(function() {
	jQuery('#slider').nivoSlider({
		effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
-more effects-
 afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
	});
});

    It would have been good to have had a reply from the OP here confirming the answer/solution or not.
    Never mind.
    If anyone else can help me (OK-I know some think I’m beyond help-LOL!)please feel free to pitch in to solve these 2 thorny WordPress problems eg using jQuery & NivoSlider in WordPress.
    ??

    @richardpd – these forums actually work better if you start a new thread – see: https://codex.www.ads-software.com/Forum_Welcome#Where_To_Post

    Ok-I’ll look into it, but this is another thing that mystifies me. So the thread is 9 months old but the subject matter is very similar to my question. Why if this forum cannot handle old posts, hasn’t someone already closed this thread then? (Shame you didn’t have some advice on my question-that is definitely the way any forum should run).

    wpismypuppet

    (@wordpressismypuppet)

    It sounds to me like you are either loading NivoSlider before jQuery is being loaded, or you aren’t loading the NivoSlider script itself at all. Can you show the way you make these calls?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Nivo slider not working’ is closed to new replies.