【jQuery】Lightbox2を使ってライトボックス機能を実装

Lightbox2とは

ライトボックス機能を提供してくれるjQueryプラグインです。

そもそもライトボックス機能とは、サムネイル画像をクリックした場合に
モーダルウィンドウを開いて拡大画像を表示する機能のことです。
また、Ajaxの技術が使用されており、画面遷移せずになめらかに画像を閲覧できることも特長の１つです。

準備

必要なCSSファイルとJSファイルを上から順に読み込む

headタグ内

lightbox.css：lightbox2 の基本デザイン

CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css">

bodyタグの直前(推奨) ※動かない場合はhead内に記述

jquery.min.js：jQuery 本体

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

lightbox.min.js：lighbox2 本体

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

画像を配置

lightbox2の対象にするリンクに「data-lightbox属性」を記述します。

data-lightbox属性

単一の画像として表示する際は属性値に一意の値を指定します。関連画像をグループ化して表示する場合は同じ名前を指定します。

data-title属性

キャプションに表示する値を指定します。

html

<div class="works-inner-items flex">
            <div class="works-inner-item">
                <a href="img/難波.jpg" data-lightbox="group" data-title="No.1" >
                <img src="img/難波.jpg" alt="難波">
                </a>
                <h2 class="font-title">NAMBA</h2>
            </div>
            <div class="works-inner-item">
                <a href="img/渋谷.jpg" data-lightbox="group" data-title="No.2">
                <img src="img/渋谷.jpg" alt="渋谷">
                </a>
                <h2 class="font-title">SHIBUYA</h2>
            </div>
            <div class="works-inner-item">
                <a href="img/横浜.jpg"  data-lightbox="group" data-title="No.3" >
                <img src="img/横浜.jpg" alt="横浜">
                </a>
                <h2 class="font-title">YOKOHAMA</h2>
            </div>
                <div class="works-inner-item">
                    <a href="img/東山.jpg"   data-lightbox="group" data-title="No.4">
                    <img src="img/東山.jpg" alt="東山">
                    </a>
                    <h2 class="font-title">HIGASHIYAMA</h2>
                </div>
                <div class="works-inner-item">
                    <a href="img/博多.jpg" data-lightbox="group" data-title="No.5">
                    <img src="img/博多.jpg" alt="博多">
                    </a>
                    <h2 class="font-title">HAKATA</h2>
                </div>
                <div class="works-inner-item">
                    <a href="img/花園.jpg" data-lightbox="group" data-title="No.6">
                    <img src="img/花園.jpg" alt="花園">
                    </a>
                    <h2 class="font-title">HANAZONO</h2>
                </div>

実行コードを記述

「data-lightbox属性」が記述されていればlightbox2が自動的に適用されます。

オプション指定

オプションはlightboxオブジェクトのoptionメソッド引数にオブジェクト形式で指定。

javascript

$(function(){
  lightbox.option({
    オプション名: 値,
    オプション名: 値,
         :
  });
});

オプション指定の例

javascript

$(function () {
  lightbox.option({
    'alwaysShowNavOnTouchDevices': false,
    'albumLabel': 'ギャラリー： %1 of %2',
    'disableScrolling': false,
    'fadeDuration': 600,
    'fitImagesInViewport': true,
    'imageFadeDuration': 600,
    'maxWidth': 400,
    'maxHeight': 400,
    'positionFromTop': 50,
    'resizeDuration': 700,
    'showImageNumberLabel': true,
    'wrapAround': false,
  });
});

オプション

オプション	デフォルト値	説明
fadeDuration	500ms	LightBox表示の開始と終了に要する時間(ミリ秒)
fitImagesInViewport	true	trueの場合、画像が大きい場合縮小して表示
maxWidth	なし	画像の最大幅
maxHeight	なし	画像の最大高さ
positionFromTop	50	トップからの画像までのピクセル数
resizeDuration	700ms	画像サイズが違う時の画像表示にかかる時間(ミリ秒)
showImageNumberLabel	true	trueの場合、画像番号と画像総数を表示する(例 image 1 of 6)
wrapAround	false	trueの場合、最後の画像に来た時、ナビゲーションを表示して最初の画像に移れる