jQueryでlightbox的な見せ方をするライブラリである「FancyBox」。知らないうちにFancyBox2なる新バージョンが出てました。が、今回は前バージョンであるFancyBox1.3.4での話。

同じhtmlページ内にある任意の領域をオーバーレイ表示したかったので、下記のように記述しました。

・HTMLのコード

<a href="#overlayArea" id="button">オーバーレイ領域を表示するためのボタン</a>

<div id="overlayArea">
オーバーレイ表示する領域
</div>

・JSのコード

$("#button").fancybox();

ところが、これをIE7で実行した所、オーバーレイで出てきた画面に以下のエラーメッセージが。

The requested content cannot be loaded. Please try again later.

FirefoxやChrome、IE9などでは問題なく表示されていたので、まあIE7のバグだろうと思って調査を開始。いろいろ調べてみたところ、FancyBoxのAPI & OptionsのページにあったAdvanced Optionsの中の"type"を"inline"に指定して明示的に引数に渡してあげたら解決されました。

$("#button").fancybox({
	type:"inline"
});

備忘録を兼ねて、小ネタでした。