exp_Note

画像がたくさんあるサイトでページ遷移することなく、画像をカッコよく表示するためにLightbox2を使ってみました。メモです。

概要・ダウンロード

Lightbox2はJavascriptとcssで作られたライブラリです。
Lightbox 2
ページ内でスクリプトを読み込んで、カッコよく表示したい画像リンクにちょこっと追記するだけで使えます。
ダウンロード
Lightbox 2　Download

インストールと準備

ダウンロードしたものを解凍すると中にあるjsとcssとimagesというフォルダを、サイトと同じ階層へアップロードする。
HTMLのヘッダに、

<!-- スクリプト -->
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<!-- スタイルシート -->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

を記述
あとは画像のリンクに、
rel="lightbox"を入れるだけでOK

<a href="image.jpg" rel="lightbox"><img src="image_thumbnail.jpg" /></a>

表示

実際に使用したサイト
Trick and Treat / color-chips.net
画像をクリックするとカッコよく表示されます。

備考

Lightboxをアップロードする場所を変更する場合、
この点にちょっと困ったので書いておきます
Lightboxで使われている画像がうまくリンクできないため、コードを変更する必要があります。
css/lightbox.css内の16,17行目

#prevLink:hover, #prevLink:visited:hover {
 background: url(../images/prevlabel.gif) left 15% no-repeat; 
}
#nextLink:hover, #nextLink:visited:hover {
 background: url(../images/nextlabel.gif) right 15% no-repeat;
}

js/lightbox.js内の49,50行目

fileLoadingImage:        'images/loading.gif',     
fileBottomNavCloseImage: 'images/closelabel.gif',

のパスをそれぞれサイトのhtmlからたどれるパスに変更すればよい。 （絶対パスなら確実？：未確認）

参考

• LightBoxの使い方とカスタマイズ方法 - CSS Lecture -