1

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.

6
  • 2
    update the question with your includes
    – martynas
    Mar 16, 2014 at 11:30
  • I edited question and hope I edited right things what you want me to do. Sorry if I'm wrong
    – OwnurD
    Mar 16, 2014 at 11:40
  • are you calling jquery twice: jquery.js and jquery-1.10.2.min.js ?
    – Moussawi7
    Mar 16, 2014 at 11:46
  • yes, when I delete jquery-1.10.2 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, 2014 at 11:50
  • As you updated the question with scripts, A very first script link you should delete. Mar 16, 2014 at 11:52

3 Answers 3

2

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

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.

6
  • I removed jquery-1.10.2.min.js but nothing changed. You can see it on source code.
    – OwnurD
    Mar 16, 2014 at 11:52
  • I'm still seeing the double include (the second is just before the head closing tag) Mar 16, 2014 at 11:54
  • I edited now, but this page rgesc.com/basvuru-formu is not working when I removed
    – OwnurD
    Mar 16, 2014 at 11:57
  • Same issue, jQuery included more than once; please remove all other instances, and use just one. Mar 16, 2014 at 12:00
  • I removed the other one but now slider is not running. nivoRun is not a function error appears
    – OwnurD
    Mar 16, 2014 at 12:04
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()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.