まずは何も言わず、下の画像をクリックしてみて！
※但しページが全て読み込まれてからじゃないと意味ないけど。。
もし普通に別のページとして画像ファイルが表示されたなら何度か試してみて。。
こんな感じで画像をかっこよく表示・演出してくれるのが、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: ブログカスタマイズあれこれ
| パーマリンク
| 
コメント (2)
ヽ(´▽｀)ノわーい、Kazuさんおこんちわわ！
Lightbox導入成功おめでとうございまするぅ！私のエントリーで
Lightbox JS v2.0はテスト中と書いてあるけど実はすでに本採用
してあったりする(笑)だいたい出来ない時って書いたり言ったり
すると出来る様になるんですよ、これが( つД`)使って思うのは
Lightbox Plusは結構デカい画像を使っている人向きって感じで
Lightbox JS v2.0は普通サイズの画像を多く使う人向きですね。
そぉなると、私のブログはLightbox Plusが向いてるって事にorz
投稿者: たねちゃん | 2006年5月15日 19:51
ヽ(‘ ∇‘ )ノ どーもです！
そうなんです。こういうのがあるのは知ってたんですけど、ずーーっと忘れてて（謎）、たねちゃんさんのエントリを見てやってみようと思った次第です。（笑）
で、Lightbox JS v2.0が動いているのを見て「うを！デカロンかっこよくね？」とそちらを入れたんですが、あっさり挫折(@o@)
そしてデジカメで撮った画像はどうせでかい画像が多いので開き直ってLightbox Plus入れてみたら動いた！そして過去のも簡単にrel属性なしでいけたのでとりあえずこのまま行こうかと。けど、じんわり現れる（？）効果や背景をもっと暗くしたり、なんてことをやってみたいと思いつつやり方が分からんヽ(｀△´)/
投稿者: Kazu | 2006年5月15日 23:16