purpleです。

「Lightbox（ライトボックス）」
皆さんご存知でしょうか。
名前は聞いたことなくても自然とwebサイトを見る時に使われたことがあるかもしれません。
webサイト上で、同じページ画面上に画像をお洒落に上乗せ表示をするための
スクリプトです。

今回はこのLightboxの簡単な使い方をご説明します。

【Lightbox JS v2.0の使い方】

1.　Lightbox 2を公式websiteからダウンロードして下さい。
このページの下部にDownloadできるボタンがあります。
（サンプルはこのページのExample部分で確認できます）

2.　ダウンロードデータしたデータは圧縮されているので解凍して下さい。（zipファイル形式）

3.　2.で解凍したデータ内には「js」「css」「images」フォルダとindex.htmlが入っています。
↓
【ダウンロードファイル名】
css / 「lightbox.css」
js / 「builder.js」,「lightbox.js」,「prototype.js」,「effects.js」,「lightbox-web.js」,「scriptaculous.js」
images / 「bullet.gif」,「close.gif」,「closelabel.gif」,「donate-button.gif」,「download-icon.gif」,「image-1.jpg」,「loading.gif」,「nextlabel.gif」,「prevlabel.gif」,「thumb-1.jpg」
「index.html」..Lightboxがtest用に用意されたダミーのindexファイル

4.　自分のローカルフォルダに
　　Lightboxダウンロードデータ内の下記ファイルを保存して下さい。
　　■jsフォルダ
　　■imagesフォルダ
　　■cssフォルダ

　　※すでに同名のフォルダがある場合は中身だけ保存して下さい。
　
5　Lightboxを使いたいページのheadタグ内（‹head›～‹/head›）に下記ソースを記述

【head内に貼り付けるソース】
‹link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /›
‹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›

※‹› が文字化けする場合は修正して下さい。

6.　画像にLightboxを反映させるタグを記述します。
　　【タグ】
　　 ‹p›‹a href="拡大画像ファイル名" rel="lightbox"›‹img src="サムネール画像ファイル名"›‹/a›‹/p›

　　これで完成です。動作確認をしてみて下さい。

【Lightbox JS v2.0カスタマイズ方法】

1.　背景の色を変更（デフォルトでは黒い部分）

　　lightbox.cssの一番下に記述してある
　　#overlayのbackground-color: #000;となっている「#000」を任意の色に変更する。

2.　画像周りの色を変更（デフォルトでは白い部分）

　　lightbox.cssの上から4つ目に指定してある #outerImageContainer と
　　下から7つ目に指定してある #imageDataContainerのbackground-color の色を
　　任意の色に変更。
　 ( 変更した場合はCLOSEの画像は白のままなので、
　 この画像を指定した色にあわせて作り直す )

3. 　ボタン系の画像の変更

　　一番簡単なのが、解凍後「images」フォルダに入っている画像の名前と同じに名前にして
　　上書きする。

4.　 ディレクトリの変更

　　現在「images」に入ってる画像を、「images/lightbox/」と変更する場合

　　下記であげた箇所の「images」となっている箇所を
　　「images/lightbox/」に変更する。

　　【変更場所】
　　・lightbox.cssにある「background: url(../images/prevlabel.gif)」　
　　　「background: url(../images/nextlabel.gif)」

　　・lightbox.jsにある「fileLoadingImage: 'images/loading.gif',」
　　「fileBottomNavCloseImage: 'images/closelabel.gif',」
　　
　　【変更例】
　　（変更前）「background: url(../images/prevlabel.gif)」
　　↓
　　（変更後）「background: url(../images/lightbox/prevlabel.gif)」

ぜひみなさんお試しください。

***************************************************************************************
■大阪（新大阪、西中島南方）で10年の実績！
　　ホームページ制作、Web、DTPの頼れる専門家集団　株式会社クレバテック
■クレバテックの今がわかるTwitterとFacebookページはこちら