Embedded Files
Lightbox は prototype.js および scriptaculous.js の effect ライブラリを利用して、サムネイル画像クリック→大きなサイズの元画像表示の動作にエフェクトを加えて、画像をお洒落に表示する JavaScript。
配布元：Lightbox JS v2.0
導入方法
lightbox.jsと、lightbox.cssのimagesファイルのパスを環境に合わせて適宜修正します。（各ファイルから見たimagesフォルダの場所を指定します。http://からフルパスで記入することも可。←間違いがない。）
ダウンロードして解凍したディレクトリ構成のまま、サーバのルートにアップロードします。（lightbox.jsと同じフォルダにprototype.js、scriptaculous.js、effect.jsが同梱されています。既にサーバにこれらファイルがある場合はアップロードの必要はありません）
HTMLファイルのheadに、次の記述を追加します。
<script type="text/javascript" src="(任意のディレクトリ)/prototype.js"></script>
<script type="text/javascript" src="(任意のディレクトリ)/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="(任意のディレクトリ)/lightbox.js"></script>
<link rel="stylesheet" href="(任意のディレクトリ)/lightbox.css" type="text/css" media="screen" />
スタイルシートへのリンクは、既存のスタイルシートがある場合、CSSファイルの冒頭行に@importを一行追加するなどの方法があると思います。
e.x, @import "(任意のディレクトリ)/lightbox.css";
リンクタグに rel="lightbox" を追加します
<a rel="lightbox" title="my caption" href="http://www.peacock-union.com/wp-content/rabi.jpg"><img alt="TrendSetter" src="http://www.peacock-union.com/wp-content/rabi.thumbnail.jpg" /></a>
表示サンプルは↓こんな感じ。title属性で指定した値（文字列）が画像のキャプションとして表示されます。
スライドショーライクな表示方法
前段4でリンクタグに挿入した rel="lightbox" を rel="lightbox[roadtrip]" に変更します。
<a title="日本の妖怪その1" rel="lightbox[roadtrip]" href="http://www.peacock-union.com/wp-content/image_01.jpg"><img alt="日本の妖怪その1" src="http://www.peacock-union.com/wp-content/image_01.thumbnail.jpg" /></a> <a title="日本の妖怪その2" rel="lightbox[roadtrip]" href="http://www.peacock-union.com/wp-content/image_02.jpg"><img alt="日本の妖怪その2" src="http://www.peacock-union.com/wp-content/image_02.thumbnail.jpg" /></a> <a title="日本の妖怪その3" rel="lightbox[roadtrip]" href="http://www.peacock-union.com/wp-content/image_03.jpg"><img alt="日本の妖怪その3" src="http://www.peacock-union.com/wp-content/image_03.thumbnail.jpg" /></a> <a title="日本の妖怪その4" rel="lightbox[roadtrip]" href="http://www.peacock-union.com/wp-content/image_04.jpg"><img alt="日本の妖怪その4" src="http://www.peacock-union.com/wp-content/image_04.thumbnail.jpg" /></a> <a title="日本の妖怪その5" rel="lightbox[roadtrip]" href="http://www.peacock-union.com/wp-content/image_05.jpg"><img alt="日本の妖怪その5" src="http://www.peacock-union.com/wp-content/image_05.thumbnail.jpg" /></a>
表示結果は次の通りです。↓
Page updated
Report abuse