4

他の投稿を乗っ取らないように、自分の投稿を始めることにしました。私は何日もいじっていましたが、FancyboxiFrame の高さをコンテンツに合わせて自動的にサイズ変更する方法がわかりません。これが私がそれを呼び出す方法です：

<script type="text/javascript">
    $(document).ready(function() {
        $(".various").fancybox()({
            maxWidth    : 713,
            minHeight   : 250,
            fitToView   : false,
            autoSize    : true,
            autoScale   : true,
            closeClick  : true,
            openEffect  : 'fade',
            closeEffect : 'fade',
            scrolling   : false,
            padding     : 0,
        });
    });
</script>

minHeight と autoScale を設定するとうまくいくと思いましたが、そうではありませんでした。そして、使用しても何もしresize();ません。

皆さんありがとう！

4

2 に答える 2

19

最初に、「Fancybox iFrame」と言うときの意味を理解していただければ幸いです。これは、fancybox のオプションを使用して外部の html/php ファイルを開くことを意味しiframeますclass。

<a href="external.html" class="fancybox fancybox.iframe">open external file in fancybox</a>

（スクリプトのオプションのため、fancybox v2.xを使用していると思います）...またはカスタムスクリプト内のオプションとして：

$(".fancybox").fancybox({
 width: 620, // or whatever
 heigh: 320,
 type: "iframe"
});

v1.3.x第二に、fancybox のオプションとv2.x相互に互換性がないことに注意する必要があります。たとえば、スクリプトfitToView(fancybox v2.x) およびautoScale(v1.3.x) で使用しています。ファンシーボックス v2.x を実際に使用している場合、autoScale認識されません。

第三に、resize()fancybox v1.3.x または v2.x のオプションではありません。v2.x を使用している場合は、代わりに$.fancybox.update()

iframe最後に、モードで開いたときにfancyboxのサイズを「自動」変更する唯一の可能な（「最も簡単な」と言うべき）方法は次のとおりです。

  • external.html開きたいページを制御する必要があります (それを所有し、最終的に同じドメイン内で実行する必要があります)。そのため、fancybox がサイズ変更するために必要な要素を追加できます。あなたのものではない他のページ（picssel.comたとえば）では、iframeを自動的に自動サイズ変更することはできません（手動でサイズを変更することはできますが、それは考えではありません。）
  • 少なくとも 2.0.6 以降の fancybox を使用する必要があります

方法？

ファイルを編集して、次のようなタグexternal.htmlに寸法を設定します<html>

<html lang="en" style="width: 800px; height: 400px;">

height（ただし、プロパティのみを割り当てたい場合があります）

次に、コールバック オプションを使用して、次のようなbeforeShow次元を取得します。iframe

  beforeShow: function(){
   this.width = $('.fancybox-iframe').contents().find('html').width();
   this.height = $('.fancybox-iframe').contents().find('html').height();
  }

また、fitToViewに設定する必要がありますfalse

サンプル コードについては、https://stackoverflow.com/a/10776520/1055987を確認してください。DEMO も含まれています。

于 2012-06-12T18:07:53.560 に答える
2

これが古いスレッドであることは承知していますが、ここにたどり着いた他の人に役立つと確信しています。iframe コンテンツを制御できない場合でも、fitToViewパラメーターをデフォルト値 ( ) のままにして、ウィンドウのサイズ変更時にtrueFancybox メソッドを呼び出します。update()

$(window).resize(function() { $.fancybox.update(); }); ただし、他のコンテンツ (画像 pdf など) も表示している場合、Fancybox はそれらを画面のサイズに自動的に合わせます。その場合、もちろん iframe と画像の fancybox を異なるパラメータで初期化できます。

于 2014-12-12T01:21:03.280 に答える