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

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

1 个答案: