［jQuery］LightBoxプラグインをページに実装する

jQueryには数多くのプラグインがありますが、プラグインがデフォルトで提供する設定をそのまま使用するのは練習段階です。

実際には自分のつくったページにプラグインを実装することが多く、そこで考慮すべきことはいくつかあります。

• プラグインを動かすために指定されているid名・クラス名を使用していないかどうか
• プラグインを複数使用する場合、相互競合の問題（動作しないケースがある）

LightBoxプラグインを自分のページに実装してみる

モーダルウィンドウで画像を表示できるLightBoxというjQueryプラグインを使用して、以前作ったフランフランの模倣ページのギャラリーを変化させてみたいと思います。

LightBoxを設定したフランフランの商品ページ２

設定方法

１、LightBoxをダウンロードする

「lightbox-2.7.1.zip」を解凍する

フォルダの内容

 　index.htmlはLightBoxのページそのままなので練習用になります

　自分のページにこのプラグインを使う場合に必要なファイル類は赤でマークしたもののみです。

２、jqueryファイル とlightbox.jsを読み込む

lightbox.js（lightbox.min.jsでも可能）はjquery本体ファイルの下に記述すること

３、lightbox.cssを読み込む

このCSSファイルはリセットCSSの下に記述すること

４、imgフォルダーに close.png、loading.gif、prev.png、next.pngを入れる

これらはウインドウ内で必要なアイコンです

５、画像のimg属性内に以下の属性を追加する

• data-lightbox="○○" （必須）・・・○○は独自の名称でOK。これが同一の画像は自動的に関連画像と認識されます。
• data-title="My caption"　・・・キャプションを表示したい場合は追加する属性

フランフランの商品ページ（デモ）の使用例

<ul>
    <li><a href="img/p1.jpg" data-lightbox="image-group"><img src="img/p1.jpg" alt="商品イメージ"></a></li>
    <li><a href="img/p2.jpg" data-lightbox="image-group"><img src="img/p2.jpg" alt="照明on時のサムネイル"></a></li>
    <li><a href="img/p3.jpg" data-lightbox="image-group"><img src="img/p3.jpg" alt="ペンダント画像１"></a></li>
    <li><a href="img/p4.jpg" data-lightbox="image-group"><img src="img/p4.jpg" alt="ペンダント画像2"></a></li>
    <li><a href="img/p5.jpg" data-lightbox="image-group"><img src="img/p5.jpg" alt="取り付け具画像"></a></li>
    <li><a href="img/p6.jpg" data-lightbox="image-group"><img src="img/p6.jpg" alt="ペンダント画像１"></a></li>
    <li><a href="img/p7.jpg" data-lightbox="image-group"><img src="img/p7.jpg" alt="ペンダント画像3"></a></li>
</ul>

data-lightbox="image-group"とつけた画像が７枚。このことでモーダルウィンドウ内では「image ● of 7」と示してくれ、左右の矢印が表れるようになります。

６、lightbox.cssの画像のパスの変更

close.png、loading.png、prev.png、next.pngの８カ所のパスをディレクトリに合わせて変更します

７、モーダルウィンドウの装飾の変更（必須ではない）

例えばウィンドウの枠の太さ、角丸の大きさなどはlightbox.cssで変更します

＜背景の濃度＞　13・14行目

.lightboxOverlay {　
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;  }

＜画像の枠線の色＞ 45行目

.lb-outerContainer {
  background-color: white;  }
 

＜ウィンドウの角丸の大きさ＞

外側　50〜54行目

.lb-outerContainer {
　 -webkit-border-radius: 10px;
  　-moz-border-radius: 10px;
  　-ms-border-radius: 10px;
  　-o-border-radius: 10px;
  　border-radius: 10px;  }

内側　32〜36行目

.lightbox .lb-image {
  　-webkit-border-radius: 10px;
  　-moz-border-radius: 10px;
  　-ms-border-radius: 10px;
  　-o-border-radius: 10px;
  　border-radius: 10px;  }