lightbox2を使ってみる

公開日:2020年08月23日

JavaScript

jQuery

公式サイト： https://lokeshdhakar.com/projects/lightbox2/

準備

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

headタグ内

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

<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属性

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

  <div class="gallery">
    <a href="img/image1.jpg" data-lightbox="group1" data-title="lightbox表示画像1">
      <img src="img/image1.jpg" alt="ブラウザ表示画像1">
    </a>
    <a href="img/image2.jpg" data-lightbox="group1" data-title="lightbox表示画像2">
      <img src="img/image2.jpg" alt="ブラウザ表示画像2">
    </a>
    <a href="img/image3.jpg" data-lightbox="group1" data-title="lightbox表示画像3">
      <img src="img/image3.jpg" alt="ブラウザ表示画像3">
    </a>
  </div>

実行コードを記述

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

オプション指定

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

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

オプション指定の例

    $(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,
      });
    });

オプション

オプション	デフォルト	説明文
alwaysShowNavOnTouchDevices	false	trueの場合、画像セットを表示しているときにマウスホバーに表示される左右のナビゲーション矢印は、タッチをサポートするデバイスで常に表示されます。
albumLabel	“Image %1 of %2”	画像セットを表示するときにキャプションの下に表示されるテキスト。デフォルトのテキストには、現在の画像番号(%1)とセット内の画像の総数(%2)が表示されます。
disableScrolling	false	trueの場合、ライトボックスが開いているときにページがスクロールしないようにします。これは、ボディに隠された設定オーバーフローによって機能します。
fadeDuration	600	Lightboxコンテナーとオーバーレイがフェードインおよびフェードアウトするのにかかる時間（ミリ秒単位）。
fitImagesInViewport	true	trueの場合、ビューポートの外側に広がる画像のサイズを変更して、ビューポートの内側にきちんと収まるようにします。これにより、ユーザーは画像全体を表示するためにスクロールする必要がなくなります。
imageFadeDuration	600	ロードされたイメージがフェードインするのにかかる時間（ミリ秒単位）。
maxWidth	–	設定されている場合、画像の幅はこの数値に制限されます（ピクセル単位）。アスペクト比は維持されません。
maxHeight	–	設定されている場合、画像の高さはこの数値に制限されます（ピクセル単位）。アスペクト比は維持されません。
positionFromTop	50	ライトボックスコンテナーが表示されるビューポートの上部からの距離（ピクセル単位）。
resizeDuration	700	Lightboxコンテナが幅と高さをアニメーション化するのにかかる時間（ミリ秒単位）。
showImageNumberLabel	true	falseの場合、現在の画像番号とセット内の画像の総数を示すテキスト（例：「画像2/4」）は非表示になります。
wrapAround	false	trueの場合、ユーザーがセットの最後の画像に到達すると、右のナビゲーション矢印が表示され、前進を続けてセットの最初の画像に戻ります。