燈箱圖片大小調整錯誤

Question

我有一個奇怪的問題。 每當我重新調整窗口大小並繼續啟動燈箱時，圖像大小都會錯誤。 再次調整窗口大小后，燈箱會檢測到窗口大小並適當地重新縮放圖像。

<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>

我在這里有網站的演示，可以鏈接到網站上的演示，您也可以在此處下載內容為zip的小zip 26kb

所以要復制我看到的錯誤。

A.首先打開演示。

B.單擊“內聯”。 關閉它。

C.之后，將瀏覽器窗口重新調整為〜400px。 再次單擊“內聯”。

D.圖像應該是錯誤的尺寸。 只要在打開燈箱的情況下使用瀏覽器調整大小，即可解決此問題。 但是我希望圖像在最初啟動燈箱時始終保持正確大小。

圖像總是被錯誤地裁剪。 有時您會看到兩個圖像，有時圖像會消失。

Answer 1

初始化flexslider后，您只需在JavaScript代碼中調用窗口調整大小即可

$(".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();
     }
 });