jQuery循环插件不能在Modal Box内部工作(简单模态插件)

Question

我正在开发一个Wordpress主题,在模式框中打开新帖子而不是单独的页面.

当帖子在自己的页面上时,我用来显示每个帖子的图像幻灯片插件(jQuery Cycle Plugin)很有用,但是当使用Simple Modal插件时,图像以列表而不是幻灯片形式显示,彻底打破我的布局.

这是帖子自己的样子(点击图片以推进幻灯片演示):http://cl.ly/240c3C0i1m1o

你可以点击这个页面上的第一个缩略图,看看模态是如何工作的(我还没有用于模态的唯一URL编码):http://cl.ly/3A2J1V2q1T0P

我假设jQuery Cycle插件在模式框中不起作用,因为它在通过单击链接加载模态内容之前将其自身应用于页面？我真的不知道.

任何帮助将非常感激.我用这个答案来帮助我实现模态框:使用带有wordpress的simplemodal.我在下面的主题中包含了一些相关代码.

这是在我的header.php文件中:

<?php
        wp_enqueue_script('jquery.cycle.all.min.js', '/wp-content/themes/Goaty%20Tapes%20Theme/js/jquery.cycle.all.min.js', array('jquery'));
        wp_enqueue_script('product-slideshow', '/wp-content/themes/Goaty%20Tapes%20Theme/js/product-slideshow.js');
?>

这是包含在product-slideshow.js(启动循环插件的设置)中的内容:

$(document).ready(function() { $('.product-images').cycle({ 
    fx:      'none', 
    next:   '.slide',
    timeout:  0
}); });

我有这个functions.php让模式工作:

function my_print_scripts() {
        if (!is_admin()) {
            $url = get_bloginfo('template_url');
            wp_enqueue_script('jquery-simplemodal', 'http://66.147.244.226/~goatytap/wp-content/themes/Goaty%20Tapes%20Theme/js/jquery.simplemodal.1.4.1.min.js', array('jquery'), '1.4.1', true);
            wp_enqueue_script('my_js', 'http://66.147.244.226/~goatytap/wp-content/themes/Goaty%20Tapes%20Theme/js/site.js', null, '1.0', true);
        }
    }
    add_action('wp_print_scripts', 'my_print_scripts');

这是在我的site.js档案中:

jQuery(function ($) {
    $('a.popup').click(function(){
        id = this.rel;
        $.get('http://66.147.244.226/~goatytap/ajax-handler/?id='+id, function (resp) {
            var data = $('<div id="ajax-popup"></div>').append(resp);
            // remove modal options if not needed
            data.modal({
                overlayCss:{backgroundColor:'#FFF'}, 
                containerCss:{backgroundColor:'#fff'}
            });
        });
        return false;
    });
});

Answer 1

您正在准备文档初始化周期.你需要初始化模态显示.

检查他们的文档

onShow [Function:null]
The callback function used after the modal dialog has opened

像这样的东西

data.modal({
            overlayCss:{backgroundColor:'#FFF'}, 
            containerCss:{backgroundColor:'#fff'},
            onShow: function (dialog) {
               $('.product-images').cycle({ 
                   fx:      'none', 
                   next:   '.slide',
                   timeout:  0
               }); 

            }
        });