Lightbox JS 2.02 を導入する
2006/12/19 @ 2:17 pm
· Filed under Script
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に、次の記述を追加します
スタイルシートへのリンクは、既存のスタイルシートがある場合、CSSファイルの冒頭行に@importを一行追加するなどの方法があると思います。
e.x, @import "(任意のディレクトリ)/lightbox.css"; - リンクタグに
rel="lightbox"を追加しますHTML:表示サンプルは↓こんな感じ。title属性で指定した値（文字列）が画像のキャプションとして表示されます。
スライドショーライクな表示方法
前段4でリンクタグに挿入した rel="lightbox" を rel="lightbox[roadtrip]" に変更します。
CODE:
-
<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>
表示結果は次の通りです。↓
業務内容のページの写真撮影サンプルを、スライドショー表示にしてみました。
TrackBack URI : http://www.peacock-union.com/archives/38/trackback/
[...] Lightboxとは？→Lightbox JS 2.02を導入する [...]
私も、便利に使っています。
最近、プラグインを入れすぎて、訳が分からなくなり、現在整理中です。