Question

我将nivo滑块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之后。

但是一个主要问题是你在jQuery中调用了head，但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

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

1 个答案: