まずは何も言わず、下の画像をクリックしてみて！

DSCN0303.jpg

※但しページが全て読み込まれてからじゃないと意味ないけど。。
もし普通に別のページとして画像ファイルが表示されたなら何度か試してみて。。

DSCN0303.jpg

こんな感じで画像をかっこよく表示・演出してくれるのが、Lightbox JS。
で、そこから更に、ウィンドウサイズよりも大きな画像を表示したとき、その画像がはみ出してしまわないように改編されたのが、Lightbox_plus。

更にもっとかっこよく演出してくれるLightbox JS v2.0もあるが、とりあえずLightbox_plusを実験的に入れてみた。

準備

まずはスクリプトやCSSのファイルをダウンロード
http://serennz.cool.ne.jp/sb/sp/lightbox/index_ja.html

ダウンロードしたファイルを全てMovableTypeのドキュメントルートディレクトリにアップロード。

テンプレート修正

動作させたいテンプレート（インデックステンプレートや各アーカイブテンプレート）の<head>～</head>に下記記述を追加。

<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<$MTBlogURL$>lightbox_plus.js"></script>

JSファイルとCSSファイルの微修正

上記のままではMovableTypeの場合、lightbox_plus用の画像やｊｓファイル、cssファイルが全てエントリのファイルを同じディレクトリにある前提になっているので、「http://example.jp/～」のように画像ファイルにフルパスを入れておくのが無難。(というか、アーカイブテンプレートの場合は必須のはず）

■lightbox_plus.jsの最後尾。

addEvent(window,"load",function() {
  var lightbox = new LightBox({
    loadingimg:'http://example.jp/loading.gif',
    expandimg:'http://example.jp/expand.gif',
    shrinkimg:'http://example.jp/shrink.gif',
    effectimg:'http://example.jp/zzoop.gif',
    effectpos:{x:-20,y:-20},
    effectclass:'effectable',
    closeimg:'http://example.jp/close.gif'
  });
});

■CSSファイル（以下がCSSファイルの全体でurl（～）のところの2箇所）

#lightbox {
        background-color: #eee;
        padding: 10px;
        border-bottom: 1px solid #666;
        border-right: 1px solid #666;
}
#overlay {
        background-image: url('http://example.jp/overlay.png);
}
#lightboxCaption {
        color: #333;
        background-color: #eee;
        font-size: 90%;
        text-align: center;
        border-bottom: 1px solid #666;
        border-right: 1px solid #666;
}
* html #overlay {
        background-color: #000;
        background-image: url('http://example.jp/blank.gif);
        filter: Alpha(opacity=50);
}

更に

本来なら、 

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

のように、rel=”lightbox”を作動させたい画像のリンクのところに入れて使うのだけど、いちいちこれを入れるのはめんどっちー。
しかも、過去分の画像全てそんなの入れていたら大変！と思っていたら以下のものを発見！
Drk7.jpさん：http://www.drk7.jp/MT/archives/001029.html
このlightbox_plus.jsの改編版を使えば、今までの全ての画像も、これからの画像も「rel=”lightbox”」と入れないでもこの画像演出効果が得られる。うーーーーん、素晴らしい！！

＜その他参考サイト＞
たねちゃんズ12: ブログカスタマイズあれこれ


こちらもご一緒にどうぞ！