燈箱圖像調整大小錯誤

Question

我有一個奇怪的問題。每當我重新調整窗口大小並繼續啓動燈箱時，圖像的尺寸都是錯誤的。一旦您再次調整窗口的大小，Lightbox會檢測窗口大小並正確重新調整圖像的大小。

<script type="text/javascript"> 
    jQuery(document).ready(function($){ 
     $(".fancybox").fancybox({ 
      type:'inline', 
      autoCenter : true, 
     afterShow: function(){ 
      $('.flexslider').flexslider({ 
       animation: "slide", 
       controlNav: "thumbnails", 
       slideshow: true, 
       touch: true, 
       animationLoop: false 
      }); 
     } 
    }); // fancybox 
    }); // ready 
</script> 

我有一個網站的演示這裏link to demo on site 你也可以下載一個小拉鍊與內容這裏zip 26kb

所以複製我看到的錯誤。

A。通過打開演示開始。

B.點擊「內聯」。關閉它。

C.之後，重新調整瀏覽器窗口的大小〜400px。再次點擊「Inline」。 D.圖片應該是錯誤的大小。只要您在打開Lightbox的情況下調整瀏覽器大小，問題就解決了。但是，我希望圖像在最初啓動燈箱時始終保持正確的大小。

圖像總是被錯誤裁剪。有時你會看到兩個圖像，有時圖像會跑掉。

Answer 1

您只需撥打一個窗口，在你的JavaScript代碼調整，一旦你已經初始化flexslider

$(".fancybox").fancybox({ 
    type:'inline', 
    autoCenter : true, 
    afterShow: function(){ 
      $('.flexslider').flexslider({ 
      animation: "slide", 
      controlNav: "thumbnails", 
      slideshow: true, 
      touch: true, 
      animationLoop: false 
      }); 

      //force browser re-calculation 
      $(window).resize(); 
    } 
});