• HOME > 
  • JavaScript > 
  • Javascriptのlightboxライブラリの使い方【画...

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

投稿日:

このページには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を次のように修正します。

lightboxの書き方

拡大前の画像を表示する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ライブラリが適用され拡大表示ができるようになります。

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

lightboxギャラリー表示

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

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

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

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

デフォルトのディレクトリ構成の場合のパス指定

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

任意のディレクトリ構成の場合のパス指定

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

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

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

lightboxの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;
}

まとめ

以上が、Javascriptのlightboxライブラリを使って画像の拡大ポップアップ表示を行う方法です。

なお、WordPressには「Easy Fancy Box」というプラグインがあり、こちらを使えばより簡単に画像の拡大ポップアップ表示の実装が可能です。

リンク先のサムネイル
ワードプレスのEasy FancyBoxの使い方【画像のポップアップ表示】

ワードプレスで「Easy FancyBox」プラグインを使用して画像をポップアップ表示する方法を説明します。プラグインを使えばHTMLやCSS、Javascriptといった専門知識がなくとも簡単にポップアップ表示を実装することが可能です...【もっと読む】

広告
広告

関連する記事

サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。
サムネイル

JSで特定の位置までスクロールされたら要素を固定する方法【s……

2024年04月12日
CSSのstickyのような動きをJSで実装する JavaScriptを使って、「ある要素がページ上部に当たるまでスクロールされたら、その位置でその要素を固定表 […]
サムネイル

JSで日付を表示するならtoLocaleDateString……

2024年03月15日
toLocaleDateStringは日付のフォーマットを少ないコードで簡潔に行えるメソッドです。20XX年X月X日というような年月日表示はもちろん、曜日の取得や西暦と和暦の変換まで即座に行ってくれます
サムネイル

JSで自動かな入力補完を実装できるライブラリ【jquery.……

2024年03月15日
jquery.autokana.jsは入力された日本語テキストのふりがな(フリガナ)を自動的に別の欄に入力してくれるJQueryのライブラリです。
サムネイル

JSでページ離脱時にメッセージを出す方法【beforeunl……

2024年03月15日
JavaScriptのイベントであるbeforeunloadを使えばページを離脱する前にメッセージを出して注意を促すことができます。