Flexslider和砌体 - imagesLoaded问题

我想在一个砌体jQuery布局中包含FlexSlider画廊。但是，我无法通过砌体来识别FlexSlider的正确高度。我知道我显然在使用imagesLoaded脚本时出了点问题。Flexslider和砌体 - imagesLoaded问题

我有imagesLoaded链接正确，并尝试几乎每个加载顺序的组合。

我如何让FlexSlider和砌体一起工作？提前致谢！

现在，我有以下脚本加载在我的文档准备功能：

var $container = $('#masonry'); 

     $container.imagesLoaded(function() { 
      $container.masonry({ 
       itemSelector: '.item', 
       gutter: 25 
      }); 
     }); 

    $('.multiSlide').flexslider({ 
      slideshow : true, 
      animation : 'slide', 
      pauseOnHover: true, 
      animationSpeed : 400, 
      smoothHeight : true, 
      directionNav: true, 
      controlNav: false, 
      prevText : '<span class="fa fa-caret-left"></span>', 
      nextText : '<span class="fa fa-caret-right"></span>' 
    });

来源

2014-12-06 user1566957

可能一的jsfiddle – Dave 2014-12-06 03:41:24

我无法在jsfiddle中复制效果。这里是我测试它的网站：http：//chadsherman.com/wp/ 问题发生在Safari - 但不是Chrome – user1566957 2014-12-06 04:25:32

不，我的意思是在Safari中我有一个重叠的问题。这里有一个截图：http://i.imgur.com/FYba6Ly.png 编辑...你删除了你的评论:-( – user1566957 2014-12-06 04:44:29

这是不是一个漂亮的修复，但我（）工作围绕同一问题通过使用setTimeout的第一个这样Flexslider火灾：

var $container = $('#masonry'); 

function loadMasonry(){ 
    $container.imagesLoaded(function() { 
     $container.masonry({ 
      itemSelector: '.item', 
      gutter: 25 
     }); 
    }); 
} 

setTimeout(loadMasonry, 500); 

$('.multiSlide').flexslider({ 
    slideshow : true, 
    animation : 'slide', 
    pauseOnHover: true, 
    animationSpeed : 400, 
    smoothHeight : true, 
    directionNav: true, 
    controlNav: false, 
    prevText : '<span class="fa fa-caret-left"></span>', 
    nextText : '<span class="fa fa-caret-right"></span>' 
});

我知道一定有这样做一个更好的办法，但似乎直到我找出更好的事情可能是这样的伎俩：P

来源

2015-01-17 21:28:47 user4465745

Flexslider和砌体 - imagesLoaded问题

回答

相关问题