• jQuery

【簡単】jQueryプラグインのlightboxを使って、画像モーダルウィンドウを実装しよう。

画像・テキストをクリック・タップしたら、簡単な画像モーダルウィンドウを表示したい。

画像をクリックしたら拡大画像をモーダルウィンドウで表示したい。

複数のモーダルウィンドウをグループ化してスライダー仕様にしたい。

本記事では、jQueryプラグインのlightboxを使ってこのような悩みを解決します。

モーダルウィンドウの実装サンプル

See the Pen
モーダルウィンドウlightbox by Kohei (@kouk05)
on CodePen.0

モーダルウィンドウの実装サンプルです。

画像をクリック・タップして頂くと、モーダルウィンドウが現れ拡大画像が表示されます。

また矢印を押すと、グループ化されてる画像がスライダーで表示されてます。

実装方法は次章より説明します。

プラグインを読み込もう

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<!-- lightbox css -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css">
<!-- lightbox js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

モーダルウィンドウの実装にはlightboxプラグインを使用します。

上記CDNをサイトに記述する事で、lightboxを使う事ができます。

jqueryも使うので、サイトに埋め込まれてない場合は同じく記述します。

モーダル用HTML

<div class="modal">
  <a href="拡大画像リンク" data-lightbox="img-group" data-title="画像01" data-alt="" >
    <img src="画像リンク" alt="">
  </a>
  <a href="拡大画像リンク" data-lightbox="img-group" data-title="画像02" data-alt="" >
    <img src="画像リンク" alt="">
  </a>
  <a href="拡大画像リンク" data-lightbox="img-group" data-title="画像03" data-alt="" >
    <img src="画像リンク" alt="">
  </a>
</div>

上記はlightboxを使ってモーダルウィンドウを実装する参考HTMLです。

モーダルウィンドウを開くにはaタグを使います。

aタグにはlightboxを使用する上で以下データ属性を入れます。

href属性
モーダルで開きたい画像のリンク先を入れます。

data-lightbox属性
値は自由です。モーダルをグループ化してスライダー仕様にしたい場合はグループ化するモーダル要素に同じ値をいれます。

data-title属性
モーダルを開いた時、左下に出てくるタイトルを入れます。

以上でモーダルウィンドウの実装完了です。

まとめ

jQueryのプラグインを使っていると実行関数などを書かなければいけない事が多いですが、lightboxはプラグインを入れ、データ属性を入れるだけでモーダルウィンドウが機能しちゃいます。

ＥCサイトの商品ページでよく見かける画像をクリックしたらモーダルウィンドウが現れる仕様に使えます。

とても簡単なのでぜひ実装してみてください。

以上で解説を終わります。