javascript - 使用 ajax 加载内容后重新定位 Fancybox 2

Question

我正在使用 ajax 加载一个 fancybox，其中大部分内容都是大图像。fancybox 在中心加载，但图像需要更长的时间并且高度增加，所以它现在位于屏幕的下半部分。

由于图像尺寸不同，我无法设置固定高度。我假设我需要在图像加载完成后重新定位它，但由于文档稀缺，我不确定如何。

我知道有一个重新定位功能，但它似乎并不像我应用它的方式那样有效。我猜我需要以某种方式检查图像何时完成加载，然后应用重新定位功能。

我目前正在调用花式框:

$(window).load(function() {
    $('.fancybox_gallery_wrapper')
        .fancybox.showLoading()
            .fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        prevEffect  : 'none',
        nextEffect  : 'none',
        maxWidth    : 900,
        maxHeight   : 700,
        fitToView   : false,
        width       : '50%',
        arrows      : true,
        helpers : {
            media : {},
            buttons : {},
            overlay : {
                css : {
                    'background' : 'rgba(0,0,0,0.8)'
                }
            }
        }
    });
});

检查图像何时完成加载然后将精美框重新定位到屏幕中央的最佳方法是什么？

Answer 1

引用fiddle

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding    : 0,
        margin     : 5,
        nextEffect : 'fade',
        prevEffect : 'none',
        afterLoad  : function () {
            $.extend(this, {
                aspectRatio : false,
                type    : 'html',
                width   : '70%',   // pop up image width - set as required 
                height  : '70%',   // pop up image height- set as required 
                content : '<div class="fancybox-image" style="background-image:url(' + this.href + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>'
            });
        }
    });