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

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

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

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

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

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

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

Tips

Text by pushman

最新の記事

Associates Link Builderで情報が表示されない
行儀よくない解決方法

画像をたくさん見せたい、よりかっこよく見せたい、という欲求は収まる気配がありません。ということで、jQueryのプラグインには大変お世話になっているのですが、とりわけ愛用しているのが「Fancybox」です。 この手のプラグインはLightboxが発表されてからいろいろ派生してきましたが、Fancyboxはオプションで調整できることが多くとても便利です。 唯一と言っていい不満が、iframeを使って別のページを表示させるときの高さ調整。——

Tips WordPress