0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-04-07

#Lightbox2とは

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

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

#準備
必要な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の場合、最後の画像に来た時、ナビゲーションを表示して最初の画像に移れる
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?