Fancybox + Flexslider仅在最初未隐藏的内容时有效

Question

我想知道是否有人可以解释为什么这对我不起作用。我正在尝试在Fancybox灯箱中使用Flexslider库。一切正常，直到我尝试在初始加载时隐藏图库内容。我把一个简单的小提琴（http://jsfiddle.net/skube/THyYe/1/）放在一起来说明。一切正常（除了最初显示画廊内容）。当我取消注释CSS中的以下行以隐藏图库并重新运行时，它会中断。

/* #gallery {display: none;}  uncomment to see not working */

Answer 1

问题是Flexslider使用自己的方法来计算视图端口的大小，然后使用滑块的大小来尝试响应。如果父容器隐藏（display: none），则Flexslider将失败并进行此类计算，因此不会显示在fancybox中。

如果您打开自己的http://jsfiddle.net/skube/THyYe/1/并调整结果窗口大小，您将看到重新计算视口后显示Flexslider。

作为一种解决方法，我会将Flexslider 内部初始化为fancybox的回调。另外，我会使用Flexslider的回调来使父容器可见，因此大小计算不会像这样失败：

$('.fancybox').fancybox({
    // optionally set dimensions
    // you may need to adjust these settings
    // width : 400, // or whatever needed
    // height: 300,
    autoSize: false, // keep this and let the slider to resize itself
    afterLoad: function () {
        $('#slider').flexslider({
            animation: "slide",
            start: function () {
                $("#gallery").show() // make parent container visible
            }
        });
    }
});

参见 JSFIDDLE