トップページ > Ajaxライブラリ使用サンプル集 > Lightboxでスムーズ画像表示

Ajaxライブラリ使用サンプル集

Lightboxでスムーズ画像表示

2

左の画像 をクリックすると、同ウィンドウでスムーズに拡大表示する。

「Lightbox」は、Lokesh Dhakar氏が作成したAjaxを利用して画像を表示するjsライブラリ。
サムネイル画像（またはテキストでも）をクリックして画像を拡大表示するエフェクトが自動的にできる。

単独の拡大表示でなく、複数の画像をグループにしてナビゲーションボタンで順次表示することもできる。
2 2 2

ボタンは画像だけでなく、テキストでも可。
夏みかんの花
愛宕山の鯉
カエルの小物入れ

imageファイルやcssに少し手を加えて、サイトに合わせて色などを変える事もできる。
→色をガラッと変えてみたサンプルはこちら。

「Lightbox」のファイルを一式ダウンロードする

Lightboxは、Sam Stephenson氏の「Prototype」 と Thomas Fuchs氏のチームによる「script.aculo.us」の、2つのAjaxライブラリを利用したもの。

Lokesh Dhakar氏のサイトから「Lightbox」をダウンロードすれば、全て必要なものは手元に来る。
ファイルを一式ダウンロードすると、下記のものが入っている。
● css（ディレクトリ）←↓"css" "images"の位置関係(パス)は変えないように。
└lightbox.css
● images（ディレクトリ）
└ナビゲーションボタンやサンプル写真など。サンプル写真は不要なので削除。
● index.html　 ←このソースを見れば構成がすぐわかる。
● js（ディレクトリ）
├builder.js
├effects.js
├lightbox.js
├prototype.js
└scriptaculous.js

「css」「images」は名前を変えずに同ディレクトリに置く。css内にナビボタン画像のパスが書かれているから。違うディレクトリに置く場合は、cssのパスを書き換える必要がある。 jsファイルは都合のいいディレクトリに置く。

<head>部に、cssとjsを読み込ませる
適用したいHTMLファイルの<head>部に、先程ダウンロードした「lightbox.css」を読み込ませる。
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
↑このCSSは、Lightboxのフォーマット色や文字色、文字の大きさなどを司る。変更可能の部分あり(後述)。


さらに、<head>部に、必要な3つのjsを下記の順に読み込ませる。 残りのbuilder.js、effects.jsも使用しているので捨てないように。
<script src="../js/prototype.js" type="text/javascript"></script>　←自分がjsファイルを置いたパスを書く
<script src="../js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="../js/lightbox.js" type="text/javascript"></script>
サムネイル画像にLightboxを指定する
下記のように、サムネイル画像に拡大用の画像をリンクさせ、<a>部分に「rel = " lightbox "」といれるだけ。
「title」は拡大表示時のコメント文となる。
<a href="img/image-name.jpg" rel="lightbox" title="増上寺のさくら">
<img src="img/thumb-name.jpg" alt="" width="150" height="80" border="0" title="増上寺のさくら" />
</a>

グループ化するには、下記のように「rel = " lightbox "」の後に [group1] と追加する。他のグループにするときは [group2] [group3] と変えて行く。 グループ化すると「NEXT」「PREV」のナビゲーションボタンがでて、拡大表示のまま順に閲覧できるようになる。
<a href="img/images-1.jpg" rel="lightbox[group1]" title="夏みかんの花">
<img src="img/thumb01.jpg" alt="2" width="150" height="80" border="0" />
</a>
<a href="img/images-2.jpg" rel="lightbox[group1]" title="愛宕山の鯉">
<img src="img/thumb02.jpg" alt="2" width="150" height="80" border="0" />
</a>
<a href="img/images-3.jpg" rel="lightbox[group1]" title="カエルの小物入れ">
<img src="img/thumb03.jpg" alt="2" width="150" height="80" border="0" />
</a>
Lightboxの色などをページに合わせて調整する

「lightbox.css」や「images」の中の画像を変更して微調整する。

「lightbox.css」の調整するセレクタは下記の通り。修正するのは赤字部分。

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
↑画像の外枠の指定。背景色background-colorは白になっているが、サイトに合う色に変更。

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
↑画像の下の文字が入る部分。書体、背景色、行送りを変更。背景色は上の画像の外枠を合わせる。

#imageData{ padding:0 10px; color: #666; }
↑画像の左下の文字部分。背景色を変えたなら読みやすい文字色に変更する。

#imageData #caption{ font-weight: bold; font-size:150%; }
↑画像の説明文。ここでは文字サイズを150％にして大きな文字にしている。

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #813111; }
↑ウィンドウ全体の着色。デフォルトは黒になっているが、サイトに合わせて変更する。
「images」の中の画像は下の3つをcssの変更に合わせて調整する。

ここではオーバーレイ（ウィンドウ全体の着色）を茶系にしたので、ボタンも茶系にした。Closeボタンは強すぎたので控えめに修正した。

色をガラッと変えてみたサンプルはこちら。

ページの最上部へ