ちょっと前から、LiteBox1.0をこのBlogへ導入しています。どんなものかは、このエントリーの画像をクリックしてみて貰うと分かるかと思います。画面遷移無しで背景をグレーアウトして画像をスマートに拡大して表示してくれます。
ただ、デフォルトのままでは、拡大した画像の下の×マークの処までマウスポインタを動かしてクリックしてやらないと、画像を閉じて元の画面に戻ってくれないのが、ちょっと面倒だと感じたので、拡大画像部分のクリックでも元の画面に戻るように、ちょこっと手を加えてみました。Movable Typeの例ですが、他のシステムでも基本は同じです。
下記の内容を出力ファイル名「mylitebox-1.0.js」で、インデックステンプレートとして登録します。
fileLoadingImage =
"<$MTBlogRelativeURL$>images/loading.gif";
fileBottomNavCloseImage =
"<$MTBlogRelativeURL$>images/closelabel.gif";
Lightbox.prototype.showImage = function() {
Element.hide('loading');
myLightbox.updateDetails();
if(imageArray.length <= 1) {
document.getElementById('lightboxImage').onclick =
function() {
myLightbox.end(); return false;
}
}
this.preloadNeighborImages();
}
あとは、LiteBoxを利用するテンプレートファイルの<head>~</head>間のlitebox-1.0.jsを読み込んでいる行の後に、上記のmylitebox-1.0.jsを追加すればOKです。(下記は追加例です)
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/litebox-1.0.js"></script>
<script type="text/javascript" src="mylitebox-1.0.js"></script>
結構、テキトーですが、上手く動いているようなのでおkおk。