WordPress 中的 Nivo Slider jQuery 插件不会旋转图像。我该如何解决这个问题？

Question

我正在将 nivo slider jQuery 插件添加到 WordPress 主题，但我无法让图像旋转。它们都加载但不旋转。这是我的标题中适用于滑块的部分：

    <?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>

这是显示图像的 div：

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

滑块所在的站点位于 http://sandbox.nspirelab.com/

Answer 1

在您的页面上，您将加载 jQuery 两次...版本 1.4 紧随版本 1.4.2 之后。

但一个主要问题是，您在 head 中调用 jQuery，但 jQuery 直到 body 中才存在。在包含插件或调用代码之前，您需要包含 jQuery。

仅包含 jQuery 一次，然后包含您的插件，然后调用您的函数。这可以在 head 或 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>

最后，由于我们正在讨论 Wordpress 主题，因此请看一下使用 enqueue 来防止多次加载 jQuery。

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