Fancyboxでiframeを表示する際の高さを自動調整
ページ読み込み後の処理
画像をたくさん見せたい、よりかっこよく見せたい、という欲求は収まる気配がありません。ということで、jQueryのプラグインには大変お世話になっているのですが、とりわけ愛用しているのが「Fancybox」です。
この手のプラグインはLightboxが発表されてからいろいろ派生してきましたが、Fancyboxはオプションで調整できることが多くとても便利です。
唯一と言っていい不満が、iframeを使って別のページを表示させるときの高さ調整。場合によってははみ出したりするので、「画像は自動でちょうどいいサイズにしてくれるんだからページの時もやってくれよ！」と自分勝手に憤っていましたが、ページの読み込み後に改めて処理を行う「onComplete」というオプションを利用すれば、iframeの高さも自動調整できるようです。
標準的なFancyboxの設定はこんな感じでしょうか。
これに先程のonCompleteを追記して、以下のようにします。
onCompleteの中に関数が書かれていますが、そこで読み込むページ全体の高さを取得して色々調整しているわけですね。最初に600pxと高さを指定していますが、ページ読み込み完了後に最適な高さにリサイズされます。
ちなみに「#fancybox-frame」などのidは元のFancyboxを書き換えていない限りこのままでOKです。
参考サイト
Fancybox：HTML表示時に高さを自動調整する｜JavaScript｜グラビカ学習帳～ホームページ制作会社 gravity works（グラビティ・ワークス）の備忘録と知識の共有と蓄積
Update：
