「画像クリックでポップアップ表示」が簡単に実装できるプラグイン「Lightbox2」が超便利

webサイト制作において、サムネイルの画像一覧を表示し、その中の画像がクリックされたら、ポップアップで画像が拡大されて表示される、といったようなインターフェースが必要になったりしますが、その際に重宝しているプラグインがあるので、ご紹介いたします。

「Lightbox2」

それが、「Lightbox2」です。使い方を紹介していきます。

ソースダウンロード

cssとjsのファイルを公式サイトからダウンロードし、サーバーにアップロードしましょう。

「Lightbox2」の公式サイトはこちら

ちなみに、CDNもあります。

「Lightbox2」のCDNはこちら

画像データもたくさんありますが、クリックした時のローディング画像などが用意されています。

「Lightbox2」 ファイルの読み込み

ここでは、CDNから読み込む例で記述しています。自分のサーバーにファイルを設置している場合は、ディレクトリ名を差し替えてください。

まずは、head内に、cssを読み込んで、

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.min.css" integrity="sha256-iU/Wh1HMAs/NgpurDAu14e7S3FkllcJ5aPnpPDdnO6c=" crossorigin="anonymous" />

body直前に、js読み込みましょう。jqueryも忘れずに。jqueryの後に、lightbox2です。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js" integrity="sha256-9r7DHolfe5aoH+bUj4FEqRBq2tmaIXBxOYUZFalCjSE=" crossorigin="anonymous"></script>

これで準備完了です。

「Lightbox2」 ソースサンプル

ざっと、こんな感じでokです。

See the Pen brmemZ by yukifujinami (@yfujifuji) on CodePen.0

デモサイトも一応用意してます。

書き方の解説をします。

<!--サムネイルを指定-->
<a href="http://shiru-web.com/wp-content/uploads/2017/03/cropped-logo_s.png" data-lightbox="sample" data-title="thumbnail"/>

<img src="http://shiru-web.com/wp-content/uploads/2017/03/cropped-logo_s.png" width="200" alt="">
</a>

基本的にはこれだけで動きます。
imgタグを a タグで囲みます。
aタグの指定先、hrefには、imgのパスを指定してください。

「data-lightbox=”sample”」は、ライトボックス自体の名称です。何枚もサムネイルがあり、それぞれクリックさせたい場合は名称を変えましょう。
「data-title=”thumbnail”」は、キャプションです。Ligntboxが表示された時に表示させたい画像の名前を入れましょう。

その下に書いてある、

<a href="http://shiru-web.com/wp-content/uploads/2017/03/cropped-logo_s.png" data-lightbox="group01" /><img src="http://shiru-web.com/wp-content/uploads/2017/03/cropped-logo_s.png" width="150" alt=""></a>

<a href="http://shiru-web.com/wp-content/uploads/2017/03/cropped-logo_s.png" data-lightbox="group01" /><img src="http://shiru-web.com/wp-content/uploads/2017/03/cropped-logo_s.png" width="150" alt=""></a>

<a href="http://shiru-web.com/wp-content/uploads/2017/03/cropped-logo_s.png" data-lightbox="group01" /><img src="http://shiru-web.com/wp-content/uploads/2017/03/cropped-logo_s.png" width="150" alt=""></a>

これは、複数の画像をLightbox表示後、左右のクリックで表示切り替えさせるものです。
すみません、手を抜いて同じ画像にしちゃったので、わかりづらいですが、全部違う画像ということでお願いします。。

「data-lightbox=”group01″」
と、lightboxの名前を同じにすることで、グルーピングできているわけですね。

「Lightbox2」 のオプション

Lightbox2には、指定できるオプションがたくさんあります。
指定の方法は、jsで下記のように指定ができます。

<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>

もちろん、Lightbox2のjsファイルの後に記述するようにしておきましょう。
他にもたくさんあるオプションを紹介しておきます。

　　　

オプション名	初期値	内容
alwaysShowNavOnTouchDevices	false	スマホのようなタッチデバイスで表示された時に、画像に表示される左右の移動ボタンを常に表示するかどうか。trueで常に表示
albumLabel	“Image %1 of %2	複数の写真をグループにして表示する場合、画面の左下に表示される何枚目表示の表現方法を指定します。設定例→シングルクォーテーション’を付けて（’photo %1 / %2’）のように書きます。
disableScrolling	false	trueの場合、Lightboxが開いている間、スクロールができないようになります。ただし、bodyに「overflow:hidden」が指定されている必要があります。
fadeDuration	600	Lightboxの表示、非表示の動きの期間を指定できます。
fitImagesInViewport	true	trueの場合、画像が画面サイズに対して大きい時、縮小して表示させることができます。ミリ秒単位。
imageFadeDuration	600	画像を表示するまでの期間を指定します。Lightboxの表示から遅れて表示させるなどができます。ミリ秒単位。
maxWidth		画像のMAX横幅をピクセル単位で指定できます。
maxHeight		画像のMAX高さをピクセル単位で指定できます。
positionFromTop	50	Lightboxの表示位置について、画面上からどの位置に表示させるか、指定できます。
resizeDuration	700	Lightboxの大きさがリサイズされる場合、その表示期間を指定します。ミリ秒単位。
showImageNumberLabel	true	falseの場合、画像番号と画像総数表示（例 image 1 of 6)を非表示にします。
wrapAround	false	trueの場合、グループの画像が最後まで達したら右矢印ボタンを表示させ、クリックされたら、グループの最初の画像に戻る挙動をonにします。

このように、色々細かい動きをオプションで指定することが可能です。
また、若干上級編になりますが、「lightbox.css」を書き換えれば、見た目のカスタマイズが可能です。

ぜひ、試してみてください！