Плагин Nivo Slider jQuery в WordPress не поворачивает изображения. Как это исправить?

Я добавляю плагин jQuery nivo slider в тему 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/.


wordpress jquery wordpress-theming nivo-slider
person user715564    schedule 23.01.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

На своей странице вы дважды загружаете 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

person Sparky    schedule 23.01.2012
comment
Хорошо спасибо. Это стартовая тема, и я не уверен, почему она дважды вызывает jquery... или где она вызывает jquery, если уж на то пошло. Очевидно, я новичок во всем этом. - person user715564; 23.01.2012
comment
@ user715564, вы можете использовать инструменты консоли в своем браузере, чтобы увидеть, что jQuery вызывается дважды (кажется, плагином Wordpress). Используйте сценарий enqueue, который предназначен для предотвращения этого. Затем переместите свой код Nivo так, чтобы он шел после включения jQuery. - person Sparky; 23.01.2012
comment
Ладно, я понял. Спасибо за помощь! - person user715564; 23.01.2012