Question

我正在尝试使用我的wordpress网站上的jquery循环插件（http://jquery.malsup.com/cycle/）制作幻灯片。

它的工作方式是，当页面加载时，我点击一个名为“.submit”的按钮，然后ajax内容出现在屏幕上，一个名为“.modal”的div改变了隐藏的可见性（display：none）在可见和内部，它有一个容器，显示来自div #slideshow的幻灯片。

我试图说明当ajax内容改变可见性时，循环插件将会加载当我这样做时，我没有收到任何错误消息，但幻灯片显示不起作用。

这是我的代码：

jQuery(document).ready(function() {
    jQuery('.submit').click(function(e) {
        e.preventDefault();
        var mod_shadow = jQuery('#modal_shadow');
        var container = jQuery('.modal');
        mod_shadow.show();
        container.show();
        var data = {
            'action': 'modal_ajax',
            'nonce': '<?php echo $ajax_nonce; ?>'
        };

        jQuery.post('<?php echo admin_url('admin - ajax.php '); ?>', data, function(response) {
            container.replaceWith(response);
        });
    });
});

jQuery('.modal').on('show', function() {
    jQuery('#slideshow').cycle({
        fx: 'scrollLeft'
    });
});

<?php 
    // ... 

    add_action( 'wp_footer', 'modal_init'); 
    function modal_init() { 
        if (!bp_is_user() || !is_user_logged_in()) { 
            return; 
        } 
        $ajax_nonce=w p_create_nonce( "nonce"); 
    } 
?>

<div id="modal_shadow" style="display: none;"></div>
<div class="modal" style="display: none;">
    <div class="modal-content-wrap">
        <div class="modal-title comp-loading-icon">
            <div class="bp-loading-icon"></div>
        </div>
    </div>
</div>




<div class=".modal-content">
    <div style="width: 250px">
        <div id="slideshow">
            <div style="width:250px; height:150px; background:red;"></div>
            <div style="width:250px; height:150px; background:blue;"></div>
            <div style="width:250px; height:150px; background:green;"></div>
            <div style="width:250px; height:150px; background:yellow;"></div>
        </div>
        <div id="prev" style="float:left;">PREV</div>
        <div id="next" style="float:right;">NEXT</div>
    </div>
</div>

ajax内容中的JQuery循环插件

0 个答案: