6

しばらくすると、FancyBox2 で iframe の高さを変更する際にまだ問題が発生します。親でこれを呼び出しています：

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

1 に答える 1

2

答えを見つけてよかったです。ありがとうございます。ヒント - 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

于 2013-02-08T08:53:11.727 に答える