« エントリーの編集画面を横に長くする-Movable Type3.3編 | メイン | Movable Type 4 リリースを8月8日に延期! »

画像を同一ウィンドウにオーバーレイして表示する

p32afsas.jpg
 最近流行っている画像の表示方法ありますよね、同一ウィンドウで背景が黒くなって画像だけポップアップされる奴です。

 私も前々から「カッコいいなぁ~欲しいなぁ~このFLASH。」と思っていましたが・・・・全然FLASHじゃないですね!Javascript。しかも公開してました!!

名前はLightbox

色々なブログで実現方法を紹介していますが、私のお気に入りカスタマイズを紹介します。


Lightbox Plus

追加機能
* ウィンドウサイズよりも大きな画像を表示した際に、画像の拡大ができます。
* 表示画像のサイズと表示位置がリアルタイムでウィンドウサイズに追従します。
* 効果画像を貼付けることができます。
* マウスホイールで画像の拡大率を変更することができます。
* 拡大した画像はマウスでドラッグできます。

更にカスタム
Lightbox Plus で画像を同一画面にオーバーレイして表示

Lightbox Plus を更に Hack 。ようは、アンカータグ(a href=ってやつのこと)の href 属性が画像であれば、lightbox が機能すればいいんだよね。

Lightboxの一番の弱点「rel="lightbox"」を付加しなくても画像にリンクを貼るだけでいいんです♪