くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

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

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

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

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

 

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

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

 

f:id:pleasure10501:20150505124949p:plain

 

 

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

 

設定方法

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

lightbox-2.7.1.zip」を解凍する

 

フォルダの内容

f:id:pleasure10501:20150505132759p:plain

 

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

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

 

 

 

 

 

 

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

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

 

3、lightbox.cssを読み込む

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

 

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

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

 

5、画像の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="ペンダント画像1"></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="ペンダント画像1"></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"とつけた画像が7枚。このことでモーダルウィンドウ内では「image ● of 7」と示してくれ、左右の矢印が表れるようになります。

 

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

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

 

7、モーダルウィンドウの装飾の変更(必須ではない)

例えばウィンドウの枠の太さ、角丸の大きさなどは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;  }

 

 

 

広告を非表示にする