Nivo Slider jQuery plugin in WordPress doesn't rotate images. How do I fix that?

Question

I am adding the nivo slider jQuery plugin to a WordPress theme but I can't get the images to rotate. They all load but they don't rotate. Here is the section of my header that applies to the slider:

    <?php wp_enqueue_script('jquery'); ?>
    <?php wp_head(); ?>
    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/default.css" type="text/css" media="screen" />
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.nivo.slider.pack.js"></script>

<script type="text/javascript">
jQuery(window).load(function() {
    jQuery('#slider').nivoSlider();
});
</script>

And here is the div where the images are being displayed:

    <div id="slider" class="nivoSlider">
    <?php
    $slides = $data['pingu_slider']; //get the slides array

    foreach ($slides as $slide) {
        echo '<h1 class="image_title">' .$slide['title'].'</h1>';
        echo '<img src="'.$slide['url'].'" alt="test">';
        echo '<p class="nivo-caption">' .$slide['description'].'</p>';
    }

    ?>
</div>

The site where the slider is located is at http://sandbox.nspirelab.com/

Answer 1

On your page, you're loading jQuery twice.... version 1.4 right after version 1.4.2.

But one major issue is that you're calling jQuery in your head but jQuery does not even exist yet until down in the body. You need to include jQuery before you include the plugins or call the code.

Only include jQuery once, then include your plugin, and then call your function. This can be done in either the head or the body.

<script src="jquery.min.js" type="text/javascript"></script>

<script src="nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
    jQuery(window).load(function() {
        jQuery('#slider').data('nivoSlider').start();
    });
</script>

And finally, since we're talking about a Wordpress theme, take a look at using enqueue to prevent the loading of jQuery multiple times.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script