Fancybox iframe dynamically resize

Question

After some time I am still having issues with resizing iframe height in FancyBox2. I am calling this in my parent:

$(document).ready(function() {
    $('.fancybox').fancybox();      
    $('.showframe').fancybox({
        openEffect : 'elastic',
        closeEffect : 'elastic',
        beforeShow: function(){
            this.width = ($('.fancybox-iframe').contents().find('body').width());
            this.height = ($('.fancybox-iframe').contents().find('body').height());
        }, 
        afterClose : function() {
            location.reload();
            return;
        },
        onUpdate : { autoHeight: true},
        helpers : {
            overlay : {closeClick: false}
        }
    });
});

And it works properly when the iframe is opened, but in the iframe I have a script that allows users to upload images and display a preview of uploaded images, so the height of the iframe changes (depending on the number of photos uploaded), but FancyBox won't "resize the height". I am using this in my "child" iframe to trigger resize:

...some functions here that handle image upload and image display...
parent.$.fancybox.scrollBox();

Now this works only in Firefox while Chrome and IE will show scroll-bars instead of resizing the iframe height. Is there a way to make this cross-browser compatible?

EDIT: I get this code to work in all browsers:

parent.$('.fancybox-inner').height($('#wrap').height()+20);

but the problem is that iframe won't center (it will just resize in height, but won't re-center on screen). I've tried parent.$.fancybox.center(); and parent.$.fancybox.reize(); and parent.$.fancybox.update(); and what-not, but that only works in Firefox.

I've found (by pure luck) that this actually works in all browsers (even IE8):

parent.$('.fancybox-inner').height($('#wrap').height()+30);
parent.$.fancybox.reposition();

Screwball

try (inside the child page) calling the method parent.$.fancybox.update() after the size have changed. Also, the format of onUpdate should be onUpdate : function(){ ... }; try setting this inside of it : this.height = $('.fancybox-iframe').contents().find('body').innerHeight(); – Darden

Answer 1

Glad you found your answer, and thanks for it. Just a hint - for Fancybox 1.3.4 users it's

parent.$.fancybox.center();

If you also want to readjust the width you have to resize more divs. My full resize looks like this:

// get iframe height and width
var current_height = document.getElementById('popup').offsetHeight;
var current_width = document.getElementById('popup').offsetWidth;

// resize height
parent.$('.fancybox-inner').height(current_height + 30);

// resize width
parent.$('#fancybox-outer').width(current_width + 30);
parent.$('#fancybox-wrap').width(current_width + 30);
parent.$('#fancybox-content').width(current_width + 30);
parent.$('.fancybox-inner').width(current_width + 30);

// center the thing - vertically and horizontally
parent.$.fancybox.center();
parent.$.fancybox.resize();

Tested IE8+, Firefox, Chrome

Beatrizbeattie