Question

我曾多次使用flexslider和fancybox，两者都是很好的插件。另外，这两个在我正在做的网站上工作得很好，但是我现在要描述的问题是当一个flexslider图库放在一个fancybox div中时。我必须指出这是一个响应式网站，因此没有静态宽度，所有宽度都是基于百分比。

起初一切似乎都在起作用。我按原样加载fancybox和flexslider显示，其宽度为fancybox容器的50％。但是如果我将display: none;添加到fancybox div，它需要隐藏div直到它被调用，当fancybox加载flexslider中的所有图像都很小，尽管flexslider div的宽度是正确的。我假设因为flexslider在页面加载时加载它不知道它的宽度是多少。这就是设置display: none;时不会发生这种情况的原因。

我加载2个插件的javascript目前看起来像这样：

// =FANCYBOX

$(".fancybox").fancybox({
    padding : 2,
    nextEffect: 'fade',
    prevEffect: 'fade',
    title: false,
});

// =FLEXSLIDER 

$(function(){

    if($(".flexslider").length > 0) {
        $(".flexslider").addClass("loading");
        // Can also be used with $(document).ready()
        $(window).load(function() {
            $('.flexslider').flexslider({
                animation: "slide",
                directionNav: false,
                slideshowSpeed: 5000,
                animationSpeed: 360,
                easing: "easeInQuad",
                useCSS: false,
                start: function(slider){
                    $('.flexslider').removeClass('loading');
                }
            });
        });
    }
});

有人知道如何在fancybox可见后强制flexslider再次初始化吗？

谢谢，史蒂夫

Answer 1

尝试在fancybox的afterShow回调中初始化flexslider，如：

jQuery(document).ready(function($){
    $(".fancybox").fancybox({
        padding : 2,
        nextEffect: 'fade',
        prevEffect: 'fade',
        title: false,
        afterShow: function(){
            $('.flexslider').flexslider({
                // flexlslider options
            });
        }
    }); // fancybox
}); // ready

Answer 2

你应该避免使用display:none; fancybox，因此flexslider可以正确地确定图像大小。

这个技巧可以帮到你：

将fancybox div放在父div中。
为fancybox div设置visibility:hidden;。
为父div设置display:none;。

在fancybox div打开后加载flexslider

2 个答案: