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

Question

我想知道是否有人可以阐明为什么这对我不起作用。我正在尝试让 Flexslider 画廊在 Fancybox 灯箱中工作。一切正常，直到我尝试在初始加载时隐藏图库内容。我整理了一个简单的小提琴 (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。

作为一种解决方法，我将在 inside 一个fancybox 的回调中初始化Flexslider。另外，我会使用 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