flexslider如何在單擊背景時顯示我的照片燈箱

Question

我嘗試將flexslider放置在具有燈箱效果的位置，但是當我觸發單擊以顯示燈箱時，它僅顯示沒有照片的背景，而當我切換到其他頁面或觸發調整大小后，圖庫開始顯示出來，這很奇怪。 我的HTML結構

<div id="main" role="main">
<div id="banner" class="lgbox_trigger"></div>
<div class="backdrop"></div>
<section class="slider">
  <div id="slider" class="flexslider">
    <ul class="slides">
      <li><img src="http://img2.wikia.nocookie.net/__cb20140410200723/pokemon/images/archive/1/16/20150102074354!025Pikachu_OS_anime_10.png" /></li>
        ------
    </div>
  <div id="carousel" class="flexslider">
    <ul class="slides">
      <li><img src="http://img2.wikia.nocookie.net/__cb20140410200723/pokemon/images/archive/1/16/20150102074354!025Pikachu_OS_anime_10.png" /></li>
        --------
    </ul>
  </div>
</section>

和JS代碼

$('#banner').click(function(){
    $('.backdrop').animate({'opacity': 0.5}, 1000, 'linear');
    $('#slider, #carousel').animate({'opacity': 1}, 1000, 'linear');
    $('#slider, .backdrop, #carousel').css('display', 'block');
  });
  $(document).on('click', '.backdrop', function(){
    $('.backdrop, #slider').animate({'opacity': 0}, 1000, 'linear', function(){
        $('.backdrop, #slider, #carousel').css('display', 'none');
    });
  })

我的JsFiddle

提前致謝

Answer 1

好吧！....經過幾天的研究...我只是發現將幻燈片放映功能移到了單擊功能，現在一切都變得很完美了........對我來說是一場噩夢

抱歉，回答格式錯誤，

在代碼之前：

    $('#carousel').flexslider({
      animation: "slide",
      animationSpeed: 400,
      controlNav: false,
      animationLoop: true,
      slideshow: false,
      itemWidth: 180,
      itemMargin: 5,
      asNavFor: '#slider',
        start: function(slider){
           flexslider = slider;
        }
    });
      $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: true,
        slideshow: false,
        sync: "#carousel"
      });

  $('#main').on('click', '#banner', function(){
    $('.backdrop').animate({'opacity': 0.5}, 1000, 'linear');
    $('#slider, #carousel').animate({'opacity': 1}, 1000, 'linear');
    $('#slider, .backdrop, #carousel').css('display', 'block');

  });

和我的最終代碼：

  $('#main').on('click', '#banner', function(){
    $('.backdrop').animate({'opacity': 0.5}, 1000, 'linear');
    $('#slider, #carousel').animate({'opacity': 1}, 1000, 'linear');
    $('#slider, .backdrop, #carousel').css('display', 'block');

    $('#carousel').flexslider({
      animation: "slide",
      animationSpeed: 400,
      controlNav: false,
      animationLoop: true,
      slideshow: false,
      itemWidth: 180,
      itemMargin: 5,
      asNavFor: '#slider',
        start: function(slider){
           flexslider = slider;
        }
    });
      $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: true,
        slideshow: false,
        sync: "#carousel"
      });
 });