画像を同一画面に表示するjavascriptライブラリ Lightbox JS v2.0

Home
Archive
画像を同一画面に表示するjavascriptライブラリ Lightbox JS v2.0

画像を同一画面に表示するjavascriptライブラリ Lightbox JS v2.0

2007年03月15日
category:javascript
Comment(2)
Trackback(0)

画像を同一画面上に表示することができるjavascriptのライブラリ「Lightbox JS」ですが、最近では使用しているサイトを多く見かけるようになってきました。今回はLightbox JS v2.0の使い方をメモ程度に書いておきます。ダウンロードは下記サイトから。

Lightbox JS v2.0

まずダウンロードしたファイルを解凍して、解凍したフォルダをlightboxとかにリネームしてアップします。フォルダの中にはサンプルが入っていますので、動作確認のために見てましょう。

Lightbox JSのサンプル

使い方は簡単です。まずjavascriptとcssを呼び出しましょう。

<script type="text/javascript" src="アップしたフォルダ/js/prototype.js"></script>
<script type="text/javascript" src="アップしたフォルダ/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="アップしたフォルダ/js/lightbox.js"></script> 
<link rel="stylesheet" href="アップしたフォルダ/css/lightbox.css" type="text/css" media="screen" />

htmlはaタグのrel属性にlightboxをします。title属性を入れることにより左下にtitleで指定した文字が表示されます。

<a href="large1.jpg" rel="lightbox" title="sample1"><img src="thumb1.jpg" alt="sample1" /></a>

また、画像リンクをグループ化することもできます。グループ化したい画像リンクの全てにrel=”lightbox[xxx]”として、xxxのところにグループ名を指定します。

<a href="large2.jpg" rel="lightbox[group]" title="sample2"><img src="thumb2.jpg" alt="sample2" /></a>
<a href="large3.jpg" rel="lightbox[group]" title="sample3"><img src="thumb3.jpg" alt="sample3" /></a>
<a href="large4.jpg" rel="lightbox[group]" title="sample4"><img src="thumb4.jpg" alt="sample4" /></a>