5

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

1 回答 1

11

您正在初始化文档准备好的周期。您需要在模态显示上进行初始化。

检查他们的文档

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

            }
        });
于 2013-04-04T09:02:22.933 回答