jQuery lightBox pluginを導入するには、ココの「Get the new version」アイコンからjQuery lightBox pluginをダウンロードしてローカル上に展開。解凍後に生成されたファイルのjsフォルダの中の「jquery.js」と「jquery.lightbox-0.4.js」、cssフォルダ、imagesフォルダをFTPで任意の場所にアップロードしよう。lightboxというディレクトリを作って中に全部放り込んでもいいし、JavaScriptライブラリ、スタイルシート、イメージをまとめたディレクトリがあるのなら、リネームしてそれぞれ設置するのもいい。後々、各ディレクトリを指定できるので、設置場所は自由だ。
jQuery lightBox plugin
アップロードが完了したら、早速各ファイルのセッティングを行っていく。焦らず慎重に行おう。
jquery.lightbox-0.4.jsの編集
「jquery.lightbox-0.4.js」を開き、28〜32行目を編集。ここでは先ほどアップロードしたimageを指定するためのセッティングを行う。
imageLoading: 'images/lightbox-ico-loading.gif',
imageBtnPrev: '［imagesのURL］/lightbox-btn-prev.gif',
imageBtnNext: '［imagesのURL］/lightbox-btn-next.gif',
imageBtnClose: '［imagesのURL］/lightbox-btn-close.gif',
imageBlank: '［imagesのURL］/lightbox-blank.gif',
このファイルを編集することによって、オーバーレイや表示スピード、ボーダーラインの細かい設定をすることができるが、その辺の解説は後日カスタマイズ方法と一緒にエントリーにする予定。とりあえずは他のパラメーターはいじらないようにしておこう。
jquery.lightbox-0.4.jsと関連ファイルを外部リンクさせる
次にJavaScriptとスタイルシートを、設置したいページ<head>〜</head>に外部リンクとして読み込ませる。
<script type="text/javascript" src="［jquery.jsのURL］"></script>
<script type="text/javascript" src="［jquery.lightbox-0.4.jsのURL］"></script>
<link rel="stylesheet" type="text/css" href="［jquery.lightbox-0.4.cssのURL］" media="screen" />
lightBox効果を与える場合の指定
画像をクリックした際にlightBox効果を与える場合を指定する。再度 jquery.lightbox-0.4.js を開き、最後尾の列に以下のコードを継ぎ足す。
$(function() {
$('.lightBox a').lightBox();
});
このコードの意味は、lightBoxというクラスのリンクを開くときに、lightBox効果を付加させるという意味で、ハイライト部分は自分の好きなように書き換えてOKだ。たとえば #lightBox とすると、lightBoxというIDのリンクをクリックした場合のみ効果を付加させることができる。
もしlightBoxを特定のページのみ扱うようにしたい場合、上記のコードを jquery.lightbox-0.4.js に書き込むのではなく、ページ直に書き込む。jquery.lightbox-0.4.js を読み込ませた後に表記すること。
<script type="text/javascript">
$(function() {
$('.lightBox a').lightBox();
});
</script>
これを、扱いたいページの<head>〜</head>間に表記する。もちろんハイライト部分は自分オリジナルに書き換えてOKなので、それぞれのページに適合しやすく、ブログなどで一括にはき出すサイトでなければ有効活用できそうだ。
イメージ周りのコーディング
以上でイメージにlightBox効果を与える下準備ができた。あとは効果を与えたいイメージに少しだけスパイスを効かせてやるだけで作業は完了する。方法は様々だが、一番手っ取り早いのがイメージを囲う div にクラスを付加してやることだろう。例えばサムネイル画像は「flower_s.jpg」をクリックした後、「flower.jpg」をlightBoxを使って表示する場合はこうだ。
<div class="lightBox">
<a href="flower.jpg"><img src="flower_s.jpg" alt="flower" /></a>
</div>
これは特に div じゃなくてもよく、テーブルタグ、リストタグ、なんでもOK。とにかく lightBoxクラスが付加された要素に囲まれているのならばなんでも良い。「lightBox効果を与える場合の指定」を工夫して、自分のわかりやすいコーディングに限定させることも可能だ。
lightBoxによって生み出される錯覚
イメージをクリックして、グニーっと表現されるlightBox効果。なんとなくWeb2.0っぽくページを仕上げることができるし、何よりもページ移動なしで拡大画像を表示させることができるのが嬉しい。もしもサムネイル画像をクリックして、ページいっぱいに拡大画像が表示されてしまったら、そこでサイトの訪問者が逃げ出してしまう可能性は捨てきれないだろう。それを食い止めて、あたかもページ内で拡大表示しているように見せてくれるlightBoxは、ビジュアルとユーザビリティを兼ね備えた素晴らしきJavaScriptに違いない。
今回はjQueryで利用でき、lightBox効果を与えることができるJavaScriptを紹介したが、世の中には元祖prototype.jsで動作するlightBoxの派生型が大量に出回っている。もしも、まだまだ目新しい効果がほしい!! と思っている人は、ほかに探し出して試してみるのもいいだろう。
Related Entry:
Related Entry:
Entry Tag
Comment