2012.11.02
Fancyboxでiframeの高さをコンテンツにあわせてみたり
イラストサイトの「さわやかまみれ」では、 jQueryプラグインFancyboxを使っております。
Fancyboxはiframeもサポートしており、コンテンツ”storys”でバックナンバーをモーダル表示しているのですが、少し不便を感じておりました。
デフォルトではiframeの幅、高さを与えて(固定して)やらなければなりません。
1 2 3 4 5 |
$(".sample").fancybox({ 'width' : 700, 'height' : 400, 'type' : 'iframe' }); |
サイズ固定となると、コンテンツが短くて下部にスペースが取られたり、コンテンツが長いときは高さのために別のクラスを振ったりしなければなりませんでした。

下の余白がなぁ…

切れちゃうから別のクラスで設定をしないとなぁ…
別なことをググっている最中に見つけました!
多謝!
ただ、当”さわやかまみれ”の場合…
1 2 3 4 5 6 7 8 9 10 11 |
$(".sample").fancybox({ 'width' : 700, 'type' : 'iframe', 'scrolling' : 'no', 'onComplete' : function () { $('#fancybox-frame').load(function(){ $('#fancybox-content').height($(this).contents().find('body').height()+30); $('#fancybox-overlay').height($(document).height()); }); } }); |
と、.height()+30にしてやらないと下部がちょぎれてしまいました。
引用元に
私は、高さが約30のピクセルに常にこのようによることを知りました+30.
これはロードしたHTMLファイル内のパディングおよびマージンによるかもしれません。しかし、正しいオフセットを得るまで、それをいじくることができます。(自動翻訳)
とあり、参考にしました。なんだ30px。

いとおかし
ぴったり収まり、さわやか〜
スポンサーリンク
コメントをどうぞ