jQuery Cycle 插件无法在模态框内工作(简单模态插件)

Question

我正在开发一个 WordPress 主题，该主题在模式框中打开新帖子而不是单独的页面。

当帖子位于其自己的页面上时，我用来显示每个帖子的图像 ( jQuery Cycle Plugin ) 的图像幻灯片插件效果很好，但是当使用 Simple Modal 时，效果很好。插件，图像显示在列表中而不是幻灯片中，完全破坏了我的布局。

以下是帖子本身的样子(单击图像可前进幻灯片):http://cl.ly/240c3C0i1m1o

您可以单击此页面上的第一个缩略图，查看模式如何工作(我还没有为模式编写唯一的 URL):http://cl.ly/3A2J1V2q1T0P

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

任何帮助将不胜感激。我用这个答案来帮助我实现模式框:Using simplemodal with wordpress 。我在下面的主题中包含了一些相关代码。

这是在我的 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

您正在文档就绪时初始化周期。您需要在模态显示上进行初始化。

检查他们的documentation

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
     }); 

  }
});