jQuery(...).nivoSlider is not a function in Wordpress

Question

I use wordpress for my website. At the beginning of the using theme, slider was working but now I get these errors

TypeError: jQuery(...).nivoSlider is not a function

TypeError: jQuery(...).lightbox is not a function

TypeError: jQuery(...).prettyPhoto is not a function

TypeError: $ is not a function

My website address is : http://www.rgesc.com/ I have been searching solutions for this problem for a week, I tried to add jquery libs, above nivo.slider.js and tried to input this. I'm not good on wordpress and need help on this issue.

var j = jQuery.noConflict();

but nothing changes.

<script type='text/javascript' src='http://www.rgesc.com/wp-includes/js/jquery/jquery.js?ver=1.8'></script>
<script type='text/javascript' src='http://www.rgesc.com/wp-content/themes/theme1885/js/modernizr.js?ver=2.0.6'></script>
<script type='text/javascript' src='http://www.rgesc.com/wp-content/themes/theme1885/js/jquery.prettyPhoto.js?ver=3.1.3'></script>
<script type='text/javascript' src='http://www.rgesc.com/wp-content/themes/theme1885/js/jquery.nivo.slider.js?ver=2.5.2'></script>
<script type='text/javascript' src='http://www.rgesc.com/wp-content/themes/theme1885/js/jquery.loader.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.rgesc.com/wp-content/themes/theme1885/js/superfish.js?ver=1.4.8'></script>

This lines in between head tags

 <script type="text/javascript">
    jQuery(window).load(function() {
        // nivoslider init
        jQuery('#slider').nivoSlider({
            effect: 'boxRainReverse',
            slices:15,
            boxCols:8,
            boxRows:8,
            animSpeed:500,
            pauseTime:5000,
            directionNav:false,
            directionNavHide:false,
            controlNav:true,
            captionOpacity:1            });
    });
</script>

This line below other scripts

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Additional photo galley is not working too. I just recognized that.

I edited question and hope I edited right things what you want me to do. Sorry if I'm wrong — OwnurD, Mar 16 '14 at 11:40
are you calling jquery twice: jquery.js and jquery-1.10.2.min.js ? — Moussawi7, Mar 16 '14 at 11:46
yes, when I delete jquery-1.10.2 http://www.rgesc.com/basvuru-formu/ this page is not working. I want to delete jquery.js but, I could not find where is it. — OwnurD, Mar 16 '14 at 11:50
As you updated the question with `scripts`, A very first script link you should delete. — Suman Bogati, Mar 16 '14 at 11:52
I removed the other jquery and now slider image appears but not running. — OwnurD, Mar 16 '14 at 12:07

score 2 · Accepted Answer · answered Mar 16 '14 at 14:14

Here's an example of WordPress implementation using the Docs example, enqueuing the styles and scripts properly, and having all demo files inside the directory /wp-content/themes/your-theme/nivo/.

enter image description here

The following code is inserted in the functions.php theme file. The shortcode is a helper to display the slider, [test-nivo] (you'll have to pull the images from the post to make this dynamic). Note the use of the bundled WP jQuery as a dependency of our script, try not to use any external jQuery as they don't have the noConflict mode enabled.
_{Main WP functions: get_stylesheet_directory_uri, wp_enqueue_script and wp_enqueue_scripts.

Check the full list of bundled WP scripts here.}

add_shortcode( 'test-nivo', 'shortcode_so_22436214');
add_action( 'wp_enqueue_scripts', 'enqueue_so_22436214' );

/**
 * SHORTCODE output
 */
function shortcode_so_22436214( $atts ) 
{
    $nivo_folder = get_stylesheet_directory_uri() . '/nivo';

    $output = <<<HTML
    <div id="slider" class="nivoSlider">
        <img src="$nivo_folder/nemo.jpg" alt="" />
        <a href="http://example.com"><img src="$nivo_folder/toystory.jpg" alt="" title="#htmlcaption" /></a>
        <img src="$nivo_folder/up.jpg" alt="" title="This is an example of a caption" />
        <img src="$nivo_folder/walle.jpg" alt="" />
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
    </div>  
HTML;

    return $output;
}

/**
 * ACTION Enqueue scripts
 */
function enqueue_so_22436214() 
{
    wp_register_script( 
         'nivo-pack',
         get_stylesheet_directory_uri() . '/nivo/jquery.nivo.slider.pack.js'
    );
    wp_enqueue_script( 'nivo-start', get_stylesheet_directory_uri() . '/nivo/start-nivo.js', array( 'jquery', 'nivo-pack' ), false, true );
    wp_enqueue_style( 'nivo-css', get_stylesheet_directory_uri() . '/nivo/nivo-slider.css' );
}

And our custom JS file, start-nivo.js:

jQuery( document ).ready( function( $ ) 
{ 
    $('#slider').nivoSlider({
        effect: 'random',               // 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: 3000,                // How long each slide will show
        startSlide: 0,                  // Set starting Slide (0 index)
        directionNav: true,             // Next & Prev navigation
        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
    });
});

score 1 · Answer 2 · edited Jul 13 '15 at 08:17

1

You are including jQuery three times:

jquery.js?ver=1.8
jquery-1.10.2.min.js
jquery-1.7.1.min.js

the includes after the first will remove all the plugins bound to $ and jQuery, include jQuery once and you'll fix the issue.

edited Jul 13 '15 at 08:17

tommasop

18,495
2
40
51

answered Mar 16 '14 at 11:50

Irvin Dominin

30,819
9
77
111

I removed jquery-1.10.2.min.js but nothing changed. You can see it on source code. – OwnurD Mar 16 '14 at 11:52
I'm still seeing the double include (the second is just before the head closing tag) – Irvin Dominin Mar 16 '14 at 11:54
I edited now, but this page http://www.rgesc.com/basvuru-formu/ is not working when I removed – OwnurD Mar 16 '14 at 11:57
Same issue, jQuery included more than once; please remove all other instances, and use just one. – Irvin Dominin Mar 16 '14 at 12:00
I removed the other one but now slider is not running. nivoRun is not a function error appears – OwnurD Mar 16 '14 at 12:04
Now included one jquery but still not working. Can you show me the way that fix this problem. I'm so stuck – OwnurD Mar 16 '14 at 12:20

score 0 · Answer 3 · edited May 23 '17 at 12:23

0

I would recommend using only 1 jQuery version unless it is absolutely necessary.

Here is how you should use multiple jQuery versions on a website using jQuery.noConflict()

edited May 23 '17 at 12:23

Community

1
1

answered Mar 16 '14 at 13:39

martynas

12,120
3
55
60

jQuery(...).nivoSlider is not a function in Wordpress

3 Answers3

Linked