Flexslider 및 Masonry - imagesLoaded 문제

저는 FlexSlider 갤러리를 Masonry jQuery 레이아웃에 포함하려고합니다. 그러나, 나는 조형물이 FlexSlider의 정확한 높이를 인식하도록 할 수 없습니다. 내가 분명히 imagesLoaded 스크립트에 문제가 있음을 알고 있습니다.Flexslider 및 Masonry - imagesLoaded 문제

imagesLoaded가 적절하게 연결되어 있으며 로딩 순서의 모든 조합을 시도했습니다.

FlexSlider와 Masonry를 함께 사용하려면 어떻게해야합니까? 미리 감사드립니다!

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

P에게 나는 jsfiddle에서 그 효과를 재현 할 수 없다. 여기에 테스트 할 웹 사이트가 있습니다. http://chadsherman.com/wp/ Safari에서 문제가 발생하지만 크롬이 아닙니다. – user1566957

아니요, Safari에서 중복되는 문제가 있습니다. 여기 스크린 샷이 있습니다 : http://i.imgur.com/FYba6Ly.png 편집 ... 내 댓글을 삭제했습니다 :-( – user1566957

이 꽤 수정하지 않습니다,하지만 난 그렇게 Flexslider 화재 첫 번째()에서는 setTimeout을 사용하여 동일한 문제를 해결했다 : 지금

는, 나는 다음과 같은 스크립트는 내 문서 준비 함수에서로드 한 :

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

나는이 작업을 수행 할 수있는 더 좋은 방법이있을 알고 있지만, 내가 더 잘 일이 될 일을 알아낼 때까지 트릭을 할 것 같다 :

출처

2015-01-17 21:28:47 user4465745

Flexslider 및 Masonry - imagesLoaded 문제

답변

관련 문제