0

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

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

1 回答 1

1

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

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

作为一种解决方法，我会在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

于 2013-05-16T17:35:25.353 回答