CODEWITHSUNDEEP
javascriptjquerywordpress
OwnurD
OwnurD

Reputation: 195

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

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.

Upvotes: 1

Views: 5825

Answers (3)

Irvin Dominin
Irvin Dominin

Reputation: 30993

You are including jQuery three times:

  1. jquery.js?ver=1.8
  2. jquery-1.10.2.min.js
  3. 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.

Upvotes: 1

brasofilo
brasofilo

Reputation: 26055

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

Upvotes: 2

martynas
martynas

Reputation: 12300

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

Upvotes: 0

Related Questions