jQuery (слайдер контента) не работает в шаблоне WordPress

Question

проблема

Я добавил слайдер контента jQuery (Coda Slider 2.0) на мою страницу шаблона Wordpress, но он ломается (появляется только текст «загрузка»).

Демонстрация

Я предоставил живые примеры, чтобы увидеть мой код в действии:

Сломанный слайдер | Рабочий ползунок

Что я пробовал

Я попытался заменить знак доллара на «jQuery» в моей голове шаблона, но безрезультатно.

<!--Slider-->
<!-- Begin Stylesheets -->
    <!--<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/stylesheets/reset.css" type="text/css" media="screen" />-->
            <!--Commented out because it's already called previously.-->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/stylesheets/coda-slider-2.0.css" type="text/css" media="screen" />
<!-- End Stylesheets -->

<!-- Begin JavaScript -->
    <!--<script type="text/javascript" src="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/javascripts/jquery-1.3.2.min.js"></script>-->
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/javascripts/jquery.coda-slider-2.0.js"></script>
    <script type="text/javascript">
        jQuery().ready(function() {
            jQuery('#coda-slider-1').codaSlider(
            {autoSlide: true, 
            autoHeight: false, 
            autoSlideStopWhenClicked: true, 
            autoSlideInterval:4000,
            dynamicArrows: false,
            dynamicTabs: false}
            );
        });
     </script>
<!-- End JavaScript -->

Буду очень признателен за любую помощь.

Answer 1

Используйте Firebug с Firefox, или в Chrome, или в Safari, или в IE8, используйте инструменты разработчика для проверки ошибок JS в демонстрационной версии, которая не работает.В данный момент библиотека JS замедления не загружается из-за 404.

Answer 2

попробуй так

$(function(){
         $('#coda-slider-1').codaSlider({
                autoSlide: true, 
                autoHeight: false, 
                autoSlideStopWhenClicked: true, 
                autoSlideInterval:4000,
                dynamicArrows: false,
                dynamicTabs: false
         });
});

Answer 3

Вы нацеливаетесь на coda-slider-1, но ваш контейнерный div равен coda-slider-wrapper (если я не пропустил что-то очевидное здесь). Это определенно испортит все. Попробуйте:

$(document).ready(function() {
            $('div#coda-slider-wrapper').codaSlider(
            {...
            );
        });

(не имеет отношения) Вы также можете рассмотреть вопрос о вставке своего поведения во внешний документ js. Кроме того, предпочтительный метод вставки javascript - через wp_enqueue_scripts, с которым вы делаете add_action в functions.php. Просто мысль;)

@ markratledge определенно прав, кроме того - 404 not found error. Firebug - твой друг.

обновление
Чтобы обеспечить правильную вставку javascript в заголовок, wordpress сначала регистрируется, а затем ставит в очередь все необходимые скрипты. Правильный способ для вставки пользовательских сценариев - это add_action для встроенных методов wp. Вставка сценариев вручную будет работать, но есть вероятность, что вы можете помешать любым встроенным сценариям. В любом случае: это пример для jquery-плагина Thickbox, и он достаточно универсален для использования с любым js. Вы можете добавить это в сценарий functions.php вашей темы, или в пользовательский плагин, или в любом другом случае.

// register scripts 
if (! function_exists(thickbox_register){
function thickbox_register() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
    wp_register_script( 'thickbox', 'path to thickbox'.thickbox.js, 'jquery');
    }  
}   
add_action('init', 'thickbox_register');

//print the now registered scripts 
if (! function_exists(thickbox_enqueue){
function thickbox_enqueue() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'thickbox' );
    }  
}
add_action('wp_print_scripts', 'thickbox_enqueue');