ちょっと前から、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>
結構、テキトーですが、上手く動いているようなのでおｋおｋ。
最近のコメント
└ おやまっち２号 06/17
└ HaZE!! 06/22
└ 西山の里 桃源 スタッフ 09/13
└ HaZE!! 09/20
湊線の夏2008
└ ひたち 08/17
└ ひたちなか海浜鉄道株式会社 08/17
└ HaZE!! 08/23
予想GUYの湊線
└ 憂 06/03
└ HaZE!! 06/04
└ 3710 06/12
└ HaZE!! 06/13
石川運動ひろばの桜2008
└ 憂 04/14
└ HaZE!! 04/29
幸楽苑
└ ちゃみニャン 02/25
└ HaZE!! 02/27