0

我已经多次使用 flexslider 和 fancybox，它们都是很棒的插件。另外，这两种方法在我正在做的网站上都很好用，但我现在要描述的问题发生在将 flexslider 画廊放置在 fancybox div 内时。我必须指出这是一个响应式网站，所以没有静态宽度，所有宽度都是基于百分比的。

起初，一切似乎都在工作。我加载了fancybox 和flexslider 显示器，它的宽度是fancybox 容器的50%。但是，如果我添加display: none;到它需要隐藏 div 直到调用它的 fancybox 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再次初始化？

谢谢，史蒂夫

4

2 回答 2

2

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

jQuery(document).ready(function($){
    $(".fancybox").fancybox({
        padding : 2,
        nextEffect: 'fade',
        prevEffect: 'fade',
        title: false,
        afterShow: function(){
            $('.flexslider').flexslider({
                // flexlslider options
            });
        }
    }); // fancybox
}); // ready
于 2013-10-29T22:20:28.180 回答
0

您应该避免display:none;使用 fancybox，以便 flexslider 可以正确确定图像大小。

这个技巧可以帮助你：

  1. 将fancybox div 放在父div 中。

  2. visibility:hidden;为fancybox div设置。

  3. 为父 div设置display:none;。

希望它有所帮助。

于 2013-10-28T20:52:57.103 回答