Fancyboxでiframeを表示する際の高さを自動調整
ページ読み込み後の処理

画像をたくさん見せたい、よりかっこよく見せたい、という欲求は収まる気配がありません。ということで、jQueryのプラグインには大変お世話になっているのですが、とりわけ愛用しているのが「Fancybox」です。

この手のプラグインはLightboxが発表されてからいろいろ派生してきましたが、Fancyboxはオプションで調整できることが多くとても便利です。
唯一と言っていい不満が、iframeを使って別のページを表示させるときの高さ調整。場合によってははみ出したりするので、「画像は自動でちょうどいいサイズにしてくれるんだからページの時もやってくれよ!」と自分勝手に憤っていましたが、ページの読み込み後に改めて処理を行う「onComplete」というオプションを利用すれば、iframeの高さも自動調整できるようです。

標準的なFancyboxの設定はこんな感じでしょうか。

これに先程のonCompleteを追記して、以下のようにします。

onCompleteの中に関数が書かれていますが、そこで読み込むページ全体の高さを取得して色々調整しているわけですね。最初に600pxと高さを指定していますが、ページ読み込み完了後に最適な高さにリサイズされます。

ちなみに「#fancybox-frame」などのidは元のFancyboxを書き換えていない限りこのままでOKです。

参考サイト

Fancybox:HTML表示時に高さを自動調整する|JavaScript|グラビカ学習帳~ホームページ制作会社 gravity works(グラビティ・ワークス)の備忘録と知識の共有と蓄積

Update:

Text by pushman

  • Instagram
  • YouTube
  • ANGLERS