问题

Question

问题

我在我的Wordpress模板页面中添加了一个jQuery内容滑块（Coda Slider 2.0），但它中断了（只显示了“loading”文本）。

演示

我在这里提供了实例，以查看我的代码：

我尝试了什么

我已经尝试在我的模板头中用美元符号替换“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

在Firefox中使用Firebug，或在Chrome或Safari或IE8中使用开发人员工具检查演示中的JS错误是否有效。现在，JS缓动库因为404而没有加载。

Answer 2

您定位的是coda-slider-1，但您的容器div是coda-slider-wrapper（除非我在这里遗漏了一些明显的东西）。这肯定搞砸了。尝试：

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

（无关）您也可以考虑将您的行为推送到外部js文档中。此外，插入JavaScript的首选方法是wp_enqueue_scripts，您可以在functions.php.中执行add_action，只是一个想法;）

@markratledge绝对是正确的，另外 - 404 not found error。萤火虫是你的朋友。

<强>更新
为确保将javascript正确插入标题，wordpress首先注册然后将所有必需的脚本排入队列。 插入自定义脚本的正确方法是add_action到wp的内置方法。手动插入脚本将起作用，但您可能会干扰任何本机脚本嵌入。无论如何：这是thickbox jquery插件的一个例子，并且通用性足以用于任何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');

Answer 3

以这种方式试试

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

jQuery（内容滑块）无法在WordPress模板中运行

问题

演示

我尝试了什么

3 个答案: