Gari@Suta-GUTI カッコ良くサムネイル画像を表示させる・Lightbox JS v2.02

カッコ良くサムネイル画像を表示させる・Lightbox JS v2.02

2006年06月11日情報

画像をクリックしてみて。

これ結構有名なスクリプトで紹介しなくてもいいかな？って思ってたんだけどサイトデザイン変更に合わせてLightbox JSもLightbox JS v2.02に変更したらメールで数名の方に「教えろ～!」って問い合わせがあったので紹介するよ。（Lightbox JSのサンプル）

Lightbox JS v2.02をダウンロードすると中にスクリプト・スタイルシート・画像のファイルが入ってます。その全てのファイル・画像を index.html と同じディレクトリにアップロードすればOK。

FC2ブログの場合<head>～</head>内を
<script type="text/javascript" src="file/prototype.js"></script>
<script type="text/javascript" src="file/scriptaculous.js?
load=effects"></script>
<script type="text/javascript" src="file/lightbox.js"></script>
と変更してください。

CSSファイルはブログのデザイン設定内に追加すればOKですが"prev.gif"と"next.gif"の前にもfile/を追加しないと駄目です。

lightbox.jsファイル内の"loading.gif"と"close.gif"も同様にfile/を追加しないと駄目です。

最後にLightbox JS を利用したい画像リンクやテキストリンクに
"rel" 属性を与えます。またオーバレイ表示させる元の画像も
用意しておいてください。
<a href="---.jpg" rel="lightbox" title="タイトル名">リンク</a>

こんな感じでFC2ブログの場合は出来たはずです。（たぶん間違ってないと思いますが責任は取りませんw）
この他にもLightbox JS v2.02は複数の画像をスライドショー風にup出来ますがその辺は翻訳して解読してください。

[オマケ]

僕の場合"loading.gif"をloading gifジェネレーターで変更してます。微妙に分かり難い所で他のと差をつけてるつもりですwww