超簡単【jQuery】LightBoxの導入・設置・実装
もくじ
今でもLightBoxを使ってます
LightBoxで画像を『ぐにゅーと』拡大表示
沢山のサイトへ導入された jQuery プラグイン「Lightbox」です。
画像をクリックすると、背景が暗くなり画面内に指定された画像が『ぐにゅーと』拡大表示されるアレですよ。
今でも使い勝手が良くて、Word Pressでも使用しています。
そこで、今更ながら「超簡単【jQuery】LightBoxの実装」と題して取り上げてみます。
LightBoxてどんなんだったけ？という方もいらっしゃるかもしれませんので、そんな時はサンプルページで動作をご確認下さい。
Lightbox：サンプル
LightBox(v2.8.2)導入
LightBoxを手に入れよう‼
LightboxをWebサイトへ実装するにあたり「Lightbox」を手に入れる必要があります。
「Lightbox」は公式サイトからとGitHubからのダウンロードが可能となっています。
公式サイトからのダウンロードはhttp://lokeshdhakar.com/から、「Lightbox」のデータをダウンロードします。
GitHubからのダウンロードするには〔lokesh/lightbox2〕へアクセスして、「Lightbox」のデータをダウンロードします。
※最新のバージョンは2.8.2となります。（2016/08/26）
ダウンロードしたZIPファイルを解凍すると、「lightbox2-master」フォルダとファイルが作成されます。
LightBox実装には、「src」フォルダ内の「js」「images」「css」の全てのファイルが必要となります。
Lightbox「src」フォルダとファイルについて
| フォルダ名 | ファイル名 | |||
|---|---|---|---|---|
| js | lightbox.js | |||
| css | lightbox.css | |||
| images | close.png | loading.gif | next.png | prev.png |
LightBox(v2.8.2)設置
LightBox設置手順
【重要】LightBoxはjQueryが設置されている事が前提です。
※GoogleにホストされているライブラリからjQueryファイルを読み込む方法を紹介します。
- 【src】内のフォルダーをお使いのFTPクライアントを使用して、アップロードします。
- html ファイルの〜 内に、以下のコードを記述します。
※各ファイルへのパスは環境に合わせて書き換えてください。
<link rel=”stylesheet” href=”css/lightbox.css”>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/lightbox.js” type=”text/javascript”></script>
準備はこれで完了です。
LightBox(v2.8.2)実装
いよいよ画像をクリックすると『ぐにゅーと』拡大表示されますよ！
画像を単独で表示
1 2 3 | <a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption"> <img src="images/image-1.jpg" alt="My caption" /> </a> |
aタグ内に 「data-lightbox=”image-1″」 を追加します。これで、LightBoxの実装が完了です。
※「image-1」は別の値でもかまいませんよ
どうです、驚くほど簡単でしょう‼
画像をグループ化して表示
1 2 3 4 5 6 7 8 9 | <a href="images/image-1.jpg" data-lightbox="image-group" data-title="My caption1"> <img src="images/image-1.jpg" alt="My caption" /> </a> <a href="images/image-2.jpg" data-lightbox="image-group" data-title="My caption2"> <img src="images/image-2.jpg" alt="My caption" /> </a> <a href="images/image-3.jpg" data-lightbox="image-group" data-title="My caption3"> <img src="images/image-3.jpg" alt="My caption" /> </a> |
aタグ内に 「data-lightbox=”image-group”」 を追加します。これで、LightBox（画像のグループ化）実装が完了です。
グループ化の際は「image-group」の値はなんでもかまいませんが、グループ内では共通の値を設定します。
共通の値、「data-lightbox=”image-group”」で指定された画像はグループ化され、画像の前後（左右）をクリックすると順にプレビューされていくようになります。
本当に、簡単ですね！
この他にオプションも用意されていますが、オプションの詳細は、別の機会にご説明しますので、それではまたの機会に(=ﾟωﾟ)ﾉ
Follow me!
