灯箱图片调整错误

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

的小型拉链

所以复制我看到的错误。

A.通过打开演示开始。

B中。点击＆＃34;内联＆＃34;。关闭它。

℃。然后将浏览器窗口重新调整为~400px。点击＆＃34;内联＆＃34;再次。

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