jquery conflict between nivoSlider and external jquery

I am running a wordpress website which has a Nivoslider on it’s homepage. I had to use another plugin so for it to work, I needed to include jquery in the header.php file, inside the ‘head’ tags. Now when I am including the jquery files under <?php wp_head(); ?>, the Nivo slider doesn’t work and gets stuck on the loading screen. I tried searching for this problem on the internet and tried a solution where I added the following code above <?php wp_head(); ?>:

<?php
    wp_deregister_script('jquery'); // Remove the default jQuery script
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false); // Register the Google hosted Version
    wp_enqueue_script('jquery'); // Enqueue the Google Hosted version
    ?>

After adding this code above <?php wp_head(); ?>, the first slide of the slider is only appearing now and I can’t switch between slides by clicking on the next/previous buttons. Also, when I remove the code <?php wp_head(); ?> from the header.php file and add the jquery files, my other plugin starts to work fine but the slider stops working. I presume jquery is being loaded twice which is causing a conflict but I can’t seem to find that from where is the problem generating. Here’s my website on which I am running the Nivoslider and the other plugin: http://ignoremusic.com/

Related posts

Leave a Reply

1 comment

  1. Error seen in JS console:

    Uncaught TypeError: Property '$' of object [object Object] is not a function 
    

    In wordpress you may experience some issues with the jquery version embedded in.
    Instead of using :

    $('#div').hide()
    

    try this :

    jQuery('#div').hide()
    

    Or you can use JQuery.noConflict()

    http://api.jquery.com/jQuery.noConflict/

    I’d personnaly embed the JS code of your slider in a noConflict() function.