javascript - fancybox-wrap高度变化时如何调用fancybox resize函数

Question

我需要将此画廊显示为 http://tympanus.net/Tutorials/ResponsiveImageGallery/在精美的盒子里。它工作正常，除了一个设计问题，即 fancybox 第一次没有出现在中心，因为如果第二次打开同一张相册，它第一次必须下载一些图像，然后在中心正确显示，因为所有图像都被缓存.我试图用下面的代码解决这个问题，但它不起作用

我不能给 fancybox 固定的宽度和高度，因为图像有不同的尺寸

$(".fancybox-frame").fancybox({
    maxWidth: 740,
    maxHeight: 600,
    fitToView: false,
    width: '70%',
    height: '70%',
    autoSize: true,
    closeClick: true,
    hideOnOverlayClick: true,
    openEffect: 'none',
    closeEffect: 'none',
    onComplete: function () {
        $.fancybox.resize();
        $.fancybox.center();
    }
});

我能想到的其他解决方案是调用 fancybox.center() 和 $.fancybox.center(); 当 fancybox wrapper 发生变化时调用函数 fancybox -wrap.

这可以帮助我正确地将 fancybox 重新定位在中心。

但我不确定如何跟踪 fancybox-wrap 的高度变化并将重新定位称为 fancy box。

Fancybox V 1.3.4感谢您在这方面的帮助。

更新:

只是为了给你一个想法，我遇到了发生在这个链接上的类似问题。

http://www.picssel.com/playground/jquery/getImageAjax.html

当您第一次点击时，它会变小，并且在下载图片时不会重新调整大小。在我的例子中，我必须下载多张图片，并且需要时间来显示中间的第一张图片采用默认值，但在下载第一张图片时不会调整大小。

Answer 1

设置 autoSize 为 false 以设置 fancybox 的宽度和高度。即

$(".fancybox-frame").fancybox({
    maxWidth: 740,
    maxHeight: 600,
    fitToView: false,
    autoSize: false,
    width: '70%',
    height: '70%',
    closeClick: true,
    hideOnOverlayClick: true,
    openEffect: 'none',
    closeEffect: 'none',
    onComplete: function () {
        $.fancybox.resize();
        $.fancybox.center();
    }
});

希望对你有帮助。