Fancybox iframe динамически изменяет размер

Через некоторое время у меня все еще возникают проблемы с изменением высоты iframe в FancyBox2. Я вызываю это у своего родителя:

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

И он работает правильно, когда iframe открыт, но в iframe у меня есть скрипт, который позволяет пользователям загружать изображения и отображать предварительный просмотр загруженных изображений, поэтому высота iframe меняется (в зависимости от количества загруженных фотографий), но FancyBox не будет «изменять размер по высоте». Я использую это в своем «дочернем» iframe, чтобы вызвать изменение размера:

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

Теперь это работает только в Firefox, в то время как Chrome и IE будут отображать полосы прокрутки вместо изменения высоты iframe. Есть ли способ сделать это кроссбраузерным?

РЕДАКТИРОВАТЬ: я получаю этот код для работы во всех браузерах:

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

но проблема в том, что iframe не будет центрироваться (он просто изменит размер по высоте, но не будет повторно центрироваться на экране). Я пробовал parent.$.fancybox.center(); и parent.$.fancybox.reize(); и parent.$.fancybox.update(); и еще что-то, но это работает только в Firefox.

Я обнаружил (по счастливой случайности), что это действительно работает во всех браузерах (даже в IE8):

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

iframe jquery fancybox fancybox-2
person Peter    schedule 14.01.2013    source источник
comment
попробуйте (внутри дочерней страницы) вызвать метод parent.$.fancybox.update() после изменения размера. Кроме того, формат onUpdate должен быть onUpdate : function(){ ... }; попробуйте установить это внутри него: this.height = $('.fancybox-iframe').contents().find('body').innerHeight();   -  person JFK    schedule 14.01.2013

Ответы (1)


arrow_upward
2
arrow_downward

Рад, что вы нашли свой ответ, и спасибо за него. Подсказка - для пользователей Fancybox 1.3.4 это

parent.$.fancybox.center();

Если вы также хотите отрегулировать ширину, вам нужно изменить размер большего количества div. Мой полный размер выглядит так:

// 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();

Протестировано IE8+, Firefox, Chrome

person tabacitu    schedule 08.02.2013