JavaScript

jQuery不要で簡単に設定できるlightgallery.jsを使って複数画像をモーダル表示する方法

  /

画像をスライド表示させるモーダルギャラリーは、ウェブサイトにインパクトを与えます。しかし、初心者にとっては設定が難しいと感じるかもしれません。
今回は、初心者でも簡単に扱える「lightgallery.js」を使用し、複数の画像をモーダルで表示する方法をわかりやすく解説します。しかも、jQuery不要で、軽量かつ効率的なスライドギャラリーを実現できるのが魅力です。

Contents

lightgallery.jsを使ってモーダル表示を設定するためのCSS

まず、モーダルで画像を表示するためには、lightgallery.jsが提供するCSS（lightgallery.min.css）を読み込みます。
以下のコードを使えば、ウェブページに合ったスタイルを設定しつつ、サムネイル表示エリア（#default）を作成できます。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  line-height: 1.8em;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
#default{
  text-align: center;
}
</style>
<!-- lightgallery.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.2.0/css/lightgallery.min.css" />

このスタイルは、テキストのフォントや見栄えを整えつつ、モーダルギャラリーのための基本的なデザインを確立します。

HTMLコードでサムネイル表示エリアを構築

次に、HTMLコードを用いてサムネイル表示エリアを作成しましょう。ここでは3枚のサムネイル画像を用意し、各画像にリンクを設定して、クリックすると大きな画像がモーダルで表示されるようにします。

<h1>サムネイルをクリックするとスライドギャラリー画像がモーダル表示されます</h1>

<div id="default">
<a href="https://dad-union.com/wp-content/uploads/2021/07/technology-1283624_1280-768x432.jpg"><img src="https://dad-union.com/wp-content/uploads/2021/07/technology-1283624_1280-768x432.jpg" width="300" height="210" /></a>
<a href="https://dad-union.com/wp-content/uploads/2021/09/cap210928-768x512.jpg"><img src="https://dad-union.com/wp-content/uploads/2021/09/cap210928-768x512.jpg" width="300" height="210" /></a>
<a href="https://dad-union.com/wp-content/uploads/2021/08/capwp210804-300x300.jpg"><img src="https://dad-union.com/wp-content/uploads/2021/08/capwp210804-300x300.jpg" width="300" height="210" /></a>
</div>

このHTML構造では、サムネイルをクリックすると、lightgallery.jsが設定されているため、画像がスライド形式で表示されます。

JavaScriptでlightgallery.jsを動かす方法

ここまで準備が整ったら、JavaScriptでlightgallery.jsを設定して動かします。lightGallery関数を用いて、指定したidに基づきモーダル表示を行います。
lightGallery(document.getElementById(“サムネイル表示エリアのid”))を設定します。サムネイル表示エリアのid=”default”タグ内のサムネイル画像をモーダル表示する記述です。

<!-- lightgallery.js JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.2.0/js/lightgallery.min.js"></script>

<script type="text/javascript">
lightGallery(document.getElementById("default"));
</script>

このコードを追加することで、指定したサムネイルエリアに対してlightgallery.jsのモーダル機能が有効になり、画像をクリックするとスライド表示が可能になります。

jQuery不要のlightgallery.jsで複数スライド画像をモーダル表示するデモページ

実際のデモを見たい場合は、次のリンクからlightgallery.jsのデモページにアクセスできます。初心者の方も、視覚的にどのように動作するか確認できるため、参考になります。

JjQuery不要のlightgallery.jsで複数スライド画像をモーダル表示するデモ

lightgallery.jsのソース元

以下がソース元になります。
lightgallery.js

まとめ

lightgallery.jsを使えば、複数の画像をモーダル表示するスライドギャラリーを簡単に実装できます。また、jQueryを必要としないため、サイトの読み込み速度に影響を与えにくいのも利点です。画像ギャラリーを必要とする場面で、ぜひlightgallery.jsを活用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

ギャラリー モーダル lightgallery.js
関連記事