Javascriptのlightboxライブラリの使い方【画像の拡大ポップアップ表示】

投稿日:2023年10月01日（最終更新日:2023年09月12日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

lightboxライブラリでできること

Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。

一覧では小さい画像を並べておき、ユーザーが見たいものだけ拡大して見せることが可能になり、ユーザビリティを高める効果が期待できます。

Javascriptのlightboxライブラリを使えば、HTMLに少しのコードを書き足すだけで下の例のような画像のポップアップ拡大表示を簡単に実装することができます。

lightbox実装手順

lightboxを使う為の事前準備として、まずはCDNもしくはダウンロードしたファイルをサイトに読み込ませます。

なおjQueryを利用するため、CDN・ダウンロードいずれの場合も事前にjQueryを読み込ませて置く必要があります。

CDNもしくはダウンロードファイルを読み込む

CDNで読み込む場合

CDNで読み込む場合は、以下のコードをサイトのheadの中などに追記すれば完了です。

CDN

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>

ダウンロードしたファイルを使う

ファイルをダウンロードして読み込ませたい場合は、下記の公式サイトにアクセスしてダウンロードしてください。

Lightbox2公式サイト

上記のページを開いたら「GETTING STARTED」という項目にあるGithubへのリンク（Github Release page）を開きます。Githubのページが開いたら「Source Code（zip）」をクリックしてダウンロードします。

ダウンロードされたZIPファイルを解凍したら、「dist」というフォルダの中から「lightbox.css」「lightbox.min.js」と「images」フォルダを任意のディレクトにアップロードしてください。

ダウンロードの場合はdistフォルダに入っている「imagesフォルダ」もアップロードする必要があります。imagesフォルダの中にはポップアップしたときに表示するボタンが用意されています。なお、CSSで当フォルダのパスが指定されているのでアップロードするディレクトリの場所に注意してください。

imgタグをaタグで囲む

ライブラリの読み込みが完了したら、拡大表示させたい画像に対してlightboxを適用させるため、画像のHTMLを次のように修正します。

拡大前の画像を表示するimgタグをaタグで囲み、hrefには元の画像と同じパスを指定します。そして同じくaタグにdata属性「data-lightbox="任意の名前"」を追記すれば完了です。

HTML

<ul class="test">
    <li>
        <a href="https://web.skipjack.tokyo/wp-content/uploads/sample1.jpg" data-lightbox="myGallery">
            <img src="https://web.skipjack.tokyo/wp-content/uploads/sample1.jpg" alt="サンプル画像1">
        </a>
    </li>
    <li>
        <a href="https://web.skipjack.tokyo/wp-content/uploads/sample2.jpg" data-lightbox="myGallery">
            <img src="https://web.skipjack.tokyo/wp-content/uploads/sample2.jpg" alt="サンプル画像2">
        </a>
    </li>
    <li>
        <a href="https://web.skipjack.tokyo/wp-content/uploads/sample3.jpg" data-lightbox="myGallery">
            <img src="https://web.skipjack.tokyo/wp-content/uploads/sample3.jpg" alt="サンプル画像3">
        </a>
    </li>
</ul>

data-lightboxについて

data-lightbox属性を設定することによって、画像にlightboxライブラリが適用され拡大表示ができるようになります。

属性値は任意の名前を付けることができますが、同じ属性値をつけた画像はひとつのギャラリーとみなされ、拡大表示した際にページ送りするように画像を切り替えて見ることが可能になります。

閉じるボタンや前後のボタンが表示されないときは？

先ほどの例のようにlighboxライブラリが正しく導入できていれば、閉じるボタンや前後の画像へ切り替える矢印ボタンが表示されます。

もし各ボタンが表示されていない場合は、imagesフォルダのアップロードとCSSのパスの記述に問題がある可能性が高いと思われます。

デフォルトのlightbox.cssには、次のようなディレクトリ構成の場合のパス指定でimagesフォルダの画像が読み込まれています。

そのためlightbox.cssやimagesフォルダをディレクトリ構成を変えてアップロードした場合は、それに合わせてCSS内のパスの記述の修正が必要になります。

拡大画像にキャプションを付ける

lighboxライブラリでは拡大表示した際に画像のキャプションを一緒に表示することが可能です。

次のように、aタグに「data-title="画像のキャプション"」を追記すれば画像の左下に表示されます。

CSSで表示サイズなどを調整する

拡大表示時のスタイルはCSSを上書きさせれば調整することも可能です。

今回は拡大サイズを調整してみます。デフォルトでは拡大するとウィンドウサイズ目一杯に表示されるので、max-widthを設定して上限を決めておきます。

（スマホで表示したときにwidthがはみ出していたのでそれも調整しました。）

CDN

/*lightbox追記修正*/
.lightboxOverlay{/*拡大時のモーダル*/
    width:100% !important;
}
.lb-outerContainer,.lb-dataContainer{
    width:calc(100% - 20px) !important;
    max-width:600px;/*拡大時の最大幅*/
}
.lb-outerContainer{
    height:auto !important;
    margin-left:auto;
    margin-right:auto;
}
.lb-image{
    width:100% !important;
    height:auto !important;
}