Fancybox + Flexslider는 처음에는 숨겨진 콘텐츠가 아닌 경우에만 작동합니다.

Question

이것이 나를 위해 효과적이지 않은 이유에 대해 누구든지 밝힐 수 있는지 궁금합니다. Fancybox 라이트 박스에서 Flexslider 갤러리를 사용하려고합니다. 초기로드시 갤러리 콘텐츠를 숨길 때까지 모든 작업이 수행됩니다. 설명하기 위해 간단한 피들 (http://jsfiddle.net/skube/THyYe/1/)을 넣었습니다. 모든 것이 작동합니다 (처음에는 갤러리 콘텐츠를 표시하는 것을 제외하고). 갤러리에서 숨기고 다시 실행하기 위해 CSS에서 다음 줄의 주석 처리를 제거하면 끊어집니다.

/* #gallery {display: none;} uncomment to see not working */ 

Answer 1

문제는 Flexslider가 뷰 포트의 크기와 응답 할 수있는 크기를 계산하기 위해 자체 메서드를 사용한다는 것입니다. 상위 컨테이너가 (display: none)이면 Flexslider가 이러한 계산에 실패하므로 fancybox에 표시되지 않습니다.

http://jsfiddle.net/skube/THyYe/1/을 열고 결과 창의 크기를 조정하면보기 포트를 다시 계산 한 후 Flexslider가 표시됩니다.

해결 방법으로 안에 Flexslider 을 초기화하고 대신 fancybox의 콜백을 사용합니다. 크기 계산은 다음과 같이 실패하지 않도록 또한, 나는 부모 컨테이너 볼 수 있도록하기 위해 Flexslider의 콜백을 사용합니다 :

$('.fancybox').fancybox({ 
    // optionally set dimensions 
    // you may need to adjust these settings 
    // width : 400, // or whatever needed 
    // height: 300, 
    autoSize: false, // keep this and let the slider to resize itself 
    afterLoad: function() { 
     $('#slider').flexslider({ 
      animation: "slide", 
      start: function() { 
       $("#gallery").show() // make parent container visible 
      } 
     }); 
    } 
}); 

을보기 때문에 JSFIDDLE