fancybox div打开后加载flexslider

我已经多次使用flexslider和fancybox，并且都是很棒的插件。另外，这两个工作在我正在做的一个网站上很好，但我现在要描述的问题发生在Flexslider库位于fancybox div内时。我必须指出这是一个响应式网站，因此没有静态宽度，所有宽度都是基于百分比的。fancybox div打开后加载flexslider

起初一切似乎都在起作用。我加载了fancybox和flexslider显示器，因为它的宽度是fancybox容器的50％。但是，如果我将display: none;添加到需要隐藏div的fancybox div直到它被调用，当fancybox加载flexslider中的所有图像时都很小，尽管flexslider div的宽度是正确的。我假设，因为flexslider加载页面时，它不知道它的宽度是什么。这就是为什么当display: none;被设置时不会发生这种情况。

我的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'); 
       } 
      }); 
     }); 
    } 
});

有谁知道我怎么能强迫flexslider后的fancybox是可见的再初始化？

谢谢你，史蒂夫

来源

2013-10-28 user1406440

你应该避免display:none;为的fancybox，所以flexslider能够正确地确定图像的大小。

这个技巧可以帮助你：

放的fancybox DIV父DIV中。
set visibility:hidden; fancybox div。
设置display:none;为父div。

希望它有帮助。

的fancybox的 afterShow回调喜欢里面

来源

2013-10-28 20:52:57

感谢，不幸的是它似乎没有工作。我认为父元素上的display none仍然必须折叠div，因此它在加载之前无法修正高度/宽度。 – user1406440

尝试初始化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-29 22:20:28 JFK

我以为会这样做，但flexslider缩略图仍然太小。小到足以在一行中显示所有3张图像，而不仅仅是正确的大小：/感谢您的回应！ – user1406440

道歉，我刚刚意识到这做了工作，当我做出一些调整。尽管我必须彻底删除标准flexslider调用才能使其工作。另外，如果一个fancybox被加载，它不包含flexslider div。当一个人打开时，确实有一个它做它以前做的事情。我想在我需要在fancybox div中排除flexslider的标准flexslider负载。而且，在“afterShow”位中，只加载某个类别的flexslider？ – user1406440

你可以放一个条件来检查滑块是否存在，如'if $（“。fancybox-inner”）。find（“。flexslider”）。length> 0' – JFK

fancybox div打开后加载flexslider

回答

相关问题