Lightbox JS v2.0の使い方
画像を格好良く表示する素敵なJavaScriptライブラリ Lightbox JS v2.0の使い方です。ここでは、ごく一般的なHTMLファイル中で使用する方法を紹介します（ココログでの使い方は、また別途）。
【必要なファイルのダウンロード】
1.以下のサイトからlightbox2.02.zipをダウンロードします。
http://www.huddletogether.com/projects/lightbox2/
2.ダウンロードしたlightbox2.02.zipを適当なフォルダで解凍します。たとえばc:\で解凍すると、次のようなフォルダが作成されます。
c:\lightbox2.02
├css
├images
└js
【ファイルの転送と設定】
必要なファイルをWebサーバに転送し、HTMLファイルを指定する方法を解説します。なお、サーバ上ではルートフォルダの下に次のような3つのサブフォルダが作成されているものとします。
/css
/images
/js
「css」は外部スタイルシート用、「images」は画像用、「js」は外部スクリプト用のフォルダです。他のフォルダ名にする場合、あるいは同じ目的で別のフォルダをすでに作成済みの場合は、そのフォルダに読み替えてください。
1.「css」フォルダにある「lightbox.css」を外部スタイルシートを置いてあるサーバ上の「css」フォルダに転送します。
2.「js」フォルダにある「prototype.js」「scriptaculous.js」「lightbox.js」「effects.js」の4つのファイルをサーバ上の「js」フォルダに転送します。
3.「images」フォルダにある画像をすべてのサーバ上の「images」フォルダに転送します。
4.同様にして、表示したい画像ファイルもすべてサーバ上の「images」フォルダに転送します。
5.lightbox2.02を設置するHTMLファイルの<head>～</head>に次のコードを追加します。これは外部スクリプトファイルの指定です。
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
6.同様にして、lightbox2.02を設置するHTMLファイルの<head>～</head>に次のコードを追加します。これは外部スタイルシートの指定です。
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
7.画像が1点だけの場合 ： HTMLファイル中に次のように画像ファイルを指定します。
<a href="images/画像ファイル" rel="lightbox" title="キャプション">リンク文字
8.画像の複数の場合 ： HTMLファイル中に次のように画像ファイルを指定します。なお、「キーワード」を同じにすることで1つのグループとして認識されます。
<a href="images/画像ファイル1" rel="lightbox[キーワード]" title="キャプション">リンク文字1</a>
<a href="images/画像ファイル2" rel="lightbox[キーワード]" title="キャプション">リンク文字2</a>
<a href="images/画像ファイル3" rel="lightbox[キーワード]" title="キャプション">リンク文字3</a>
：
：
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
ではなく
では？
解説どおりやってて動かなくて焦った。
投稿： うごかないYO | 2008/11/19 15:11