jQuery Cycle 插件在模态框内不起作用（简单模态插件）答案

【问题标题】：jQuery Cycle Plugin Not Working Inside of Modal Box (Simple Modal Plugin)jQuery Cycle 插件在模态框内不起作用（简单模态插件）
【发布时间】：2013-03-23 09:25:38
【问题描述】：

我正在开发一个 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;
    });
});

【问题讨论】：

标签： jquery wordpress modal-dialog jquery-cycle simplemodal

【解决方案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
               }); 

            }
        });

【讨论】：