javascript - 在 WordPress 中加载帖子后如何运行 jQuery 方法？

Question

我正在使用 Smooth Div Scroll jQuery Plugin在网站上制作移动电影胶片。加载到胶片中的图像属于自定义帖子类型，每个图像都有一个标题并包含一个图像。该插件在包含任意数量图像的长 div 上水平滚动。我的问题是，即使在图像消失后，我仍可以滚动看似无限长的时间。

这是我对问题的分析:

• 我试过使用纯图像代替后循环，以及一切按预期工作(没有无限滚动)。
• 我试过在 document.ready 和 window.load 之间设置脚本，但 document.ready 它们根本不加载。
• 我试过调用一个公共(public)函数“recalculateScrollableArea”，以便在图像加载无果后计算面积，然后通过在脚本中调用 jQuery 中的警告框，我可以看到它仍在被调用在加载图像之前。

它通常应该是什么样子: 过度滚动时的外观:

Smooth Div Scroll 代码和下面的初始化代码都在页脚底部调用:

jQuery(window).load(function() {
    jQuery("div#makeMeScrollable").smoothDivScroll({ 
        autoScroll: "onstart" , 
        autoScrollDirection: "backandforth", 
        autoScrollStep: 1, 
        autoScrollInterval: 15, 
        visibleHotSpots: "always"
    });

这是我尝试修复调整大小所做的:

jQuery(document).ready(function() {
    jQuery("#makeMeScrollable").smoothDivScroll("disable");
});

我还应该提一下，帖子的图片被“p”标签包围，但我不明白为什么会是这个问题。

感谢阅读!

编辑:这里有更多代码，其中大部分是现成的，并且在放置普通 IMG 而不是循环时可以正常工作。

基础 CSS 和 jQuery 文件与这个简单演示中的相同: http://www.smoothdivscroll.com/basicDemo.htm

jQuery 和 jQuery UI 导入(有效)

function jQuery_from_Google() {
    if ( !is_admin() ) { // actually not necessary, because the Hook only get used in the Theme
        wp_deregister_script( 'jquery' ); // unregistered key jQuery
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js', false, '1.5.2'); // register key jQuery with URL of Google CDN
        wp_enqueue_script( 'jquery' ); // include jQuery
    }
}
// nur for Themes since WordPress 3.0
add_action( 'after_setup_theme', 'jQuery_from_Google' ); // Theme active, include function

function jQueryUI_from_Google() {
    if ( !is_admin() ) { // actually not necessary, because the Hook only get used in the Theme
        wp_register_script( 'jqueryui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'); // register key jQueryUI with URL of Google CDN
        wp_enqueue_script( 'jqueryui' ); // include jQueryUI
    }
}
// nur for Themes since WordPress 3.0
add_action( 'after_setup_theme', 'jQueryUI_from_Google' ); // Theme active, include function

导入发生在页脚底部:

<?php // Smooth Div Scroll inport for filmstrip galleries ?>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/javascript/filmstrip.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/SmoothDivScroll-1.1/js/jquery.smoothDivScroll-1.1-min.js"></script>
</body>
</html>

下面是一个使用循环内容的部分的代码片段:

<?php if(is_page('engagements')) { ?>
<div id="makeMeScrollable">
    <div class="scrollingHotSpotLeft"></div>
    <div class="scrollingHotSpotRight"></div>
    <div class="scrollWrapper">
        <div class="scrollableArea">
            <?php 
                $args = array( 'post_type' => 'engagement_photos' );
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post();
                    the_content();
                endwhile;
            ?>
        </div>
    </div>
</div>
<?php } else if(is_page('weddings')) { ?>

这是在 WordPress 中添加图像的示例:

Answer 1

您可能想在 functions.php 文件中尝试以下代码。

function init_my_scripts()
{
    if (!is_admin())
    {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://code.jquery.com/jquery-1.6.1.min.js');
        wp_enqueue_script('jquery');

        wp_deregister_script('jQuery UI Core');
        wp_register_script( 'jQuery UI Core', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'); // register key jQueryUI with URL of Google CDN
        wp_enqueue_script( 'jQuery UI Core' ); // include jQueryUI

        wp_register_script('filmstrip', get_bloginfo('template_directory').'/javascript/filmstrip.js');
        wp_enqueue_script('filmstrip');

        wp_register_script('smoothDivScroll', get_bloginfo('template_directory').'/SmoothDivScroll-1.1/js/jquery.smoothDivScroll-1.1-min.js');
        wp_enqueue_script('smoothDivScroll');

    }
}

add_action('init', 'init_my_scripts');

当然，你可以把jQuery CDN改成Google CDN，把'template_directory'改成'stylesheet_directory'等等。