Reposition Fancybox 2 after loading content with ajax

Question

I'm loading a fancybox with ajax and the majority of the content is a large image. The fancybox loads in the centre but image takes a moment longer and the height grows so it is now in the bottom half of the screen.

I can't set a fixed height due to different image sizes. I assume I'll need to reposition it after the image has finished loading but due to the scarce documentation I'm not sure how.

I understand there is a reposition function but it doesn't seem to work the way I'm applying it. I'm guessing I'll need to somehow check when the image has finished loading and then apply the reposition function.

I'm currently calling the fancy box with:

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

What's the best way to check for when the image has finished loading and then reposition the fancy box to the centre of the screen?

Answer 1

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