Question

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

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

这是帖子本身的样子（点击图片以推进幻灯片演示）：http://cl.ly/240c3C0i1m1o

您可以点击此页面上的第一个缩略图，查看模式的工作原理（我还没有编码用于模态的唯一网址）：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
               }); 

            }
        });

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

1 个答案: