Fancybox + Flexslider работает только в том случае, если контент не изначально скрыт

Question

Мне интересно, может ли кто-нибудь пролить свет на то, почему это не работает для меня. Я пытаюсь получить галерею Flexslider, работающую в лайтбокс Fancybox. Все работает, пока я не попытаюсь скрыть содержимое галереи при начальной загрузке. Я собрал простую скрипку (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