花式盒子 div 打开后加载 flexslider答案

【问题标题】：Load flexslider after a fancybox div has opened花式盒子 div 打开后加载 flexslider
【发布时间】：2013-10-30 06:20:28
【问题描述】：

我已经多次使用过 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 重新初始化？

谢谢，史蒂夫

【问题讨论】：

标签： javascript jquery html fancybox flexslider

【解决方案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

【讨论】：

我认为可以这样做，但 flexslider 缩略图仍然太小。小到可以在一行中显示所有 3 张图片，而不仅仅是正确尺寸的 1 张：/ 感谢您的回复！
抱歉，当我进行一些调整时，我刚刚意识到这确实有效。尽管我必须完全删除标准的 flexslider 调用才能使其正常工作。此外，如果加载了不包含 flexslider div 的 fancybox。当打开一个确实有一个的时，它会执行以前的操作。我想在标准的 flexslider 负载中，我需要在 fancybox div 中排除 flexslider。还有，在“afterShow”位中，只加载某个类的flexslider？
您可以设置一个条件来检查滑块是否存在，例如if $(".fancybox-inner").find(".flexslider").length > 0

【解决方案2】：

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

这个技巧可以帮助你：

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

希望对你有所帮助。

【讨论】：

谢谢你，不幸的是它似乎没有用。我认为父元素上的 display none 仍然必须折叠 div，因此它无法在加载之前锻炼高度/宽度。