javascript - 灯箱图像调整大小错误

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>

我在这里有一个网站演示 link to demo on site 您还可以在此处下载包含内容的小 zip zip 26kb

所以要复制我看到的错误。

A.首先打开演示。

B.单击“内联”。关闭它。

C.然后将浏览器窗口重新缩放到大约 400 像素。再次单击“内联”。

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