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

Question

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

这是我对问题的分析：

• 我尝试使用普通图像代替 后循环，以及一切 按预期工作（没有无限 滚动）。
• 我尝试在 document.ready 和 window.load 之间设置脚本，但使用 document.ready 时它们根本不会加载。
• 我尝试调用公共函数“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' 等等。

Answer 2

发现问题，我尝试放入正常的硬编码 imgs，然后将它们包装在产生相同问题的“p”标签中。我想我只是想多了这个问题。对不起。现在要弄清楚如何让循环只生成 imgs。