Archives‎ > ‎

[2006/12/19] Lightbox JS 2.02 を導入する　《書きかけ》

Lightbox は prototype.js および scriptaculous.js の effect ライブラリを利用して、サムネイル画像クリック→大きなサイズの元画像表示の動作にエフェクトを加えて、画像をお洒落に表示する JavaScript。
導入方法
  1. lightbox.jsと、lightbox.cssのimagesファイルのパスを環境に合わせて適宜修正します。（各ファイルから見たimagesフォルダの場所を指定します。http://からフルパスで記入することも可。←間違いがない。）
  2. ダウンロードして解凍したディレクトリ構成のまま、サーバのルートにアップロードします。（lightbox.jsと同じフォルダにprototype.js、scriptaculous.js、effect.jsが同梱されています。既にサーバにこれらファイルがある場合はアップロードの必要はありません）
  3. 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属性で指定した値（文字列）が画像のキャプションとして表示されます。
TrendSetter

スライドショーライクな表示方法

前段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>

表示結果は次の通りです。↓
日本の妖怪その1日本の妖怪その2日本の妖怪その3日本の妖怪その4日本の妖怪その5

Comments