灯箱图片大小调整错误

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