“thickboxをlightbox風にアニメーションさせるカスタマイズ。”という、夢実現のためのアファメーション。

関数を分割する。

ベースはこちら⇒Thickboxをカスタマイズしてみる

表示関連のtb_show()関数を2つに分けて、

tb_open() { 黒背景＆表示枠を表示 }
↓
tb_show() { リサイズアニメーション＆中身表示 }

という流れだそうです。

まぁ、上記サイトにサンプルもソースコードもあるので、基本そのままDLして実装すればいいんだけど、そのまま使ってみるとちょっと気になることが。

画像をクリックして閉じると、ページトップに飛んでしまう！？ので、さらにカスタマイズ。

普通に「closeボタン」（リンク）をクリックするとそのまま閉じるんだけど、画像をクリックして閉じる（Thickboxのデフォルトの機能）と、画像を閉じた瞬間、なぜかページトップに飛んでしまう。

「パッ」とページが切り替わってしまうので、ページ中盤に画像ギャラリーがあるような場合、ちょっと気持ちよくない。

んで、それを修正する場合、前述のカスタマイズされたthickbox.jsの145行目付近の

$("#TB_Image").fadeIn("fast");
$("#TB_closeWindowButton").click(tb_remove);

に、$("#TB_ImageOff").click(tb_remove);を追加する。

つまり

$("#TB_Image").fadeIn("fast");
$("#TB_closeWindowButton").click(tb_remove);
$("#TB_ImageOff").click(tb_remove);

って感じ。

そうすることで、画像をクリックしてもその場で画像を閉じることができるようになります。

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！