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

複数画像をスライドでモーダル表示するJavaScriptライブラリは多数ありますが、今回はjQuery不要で簡単に設定できるlightgallery.jsを使って複数画像をモーダル表示する方法をご紹介します。

Contents

lightgallery.jsを使って複数画像をモーダル表示するサムネイル画像のCSS記述
lightgallery.jsを使って複数画像をモーダル表示するサムネイル画像のHTML記述
lightgallery.jsを使って複数画像をモーダル表示するJavaScript記述
jQuery不要のlightgallery.jsで複数スライド画像をモーダル表示するデモページ
lightgallery.jsのソース元

lightgallery.jsを使って複数画像をモーダル表示するサムネイル画像のCSS記述

※lightgallery.min.cssファイルをcdnから読み込みます。その他、サムネイル表示エリア（#default）のCSS記述です。必要に応じて変更して下さい。

<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" />

lightgallery.jsを使って複数画像をモーダル表示するサムネイル画像のHTML記述

※サムネイル表示エリアid=”default”にサムネイル画像を3枚用意します。各サムネイル画像にaタグを設定しhrefに画像のパスを設定します。

<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>

lightgallery.jsを使って複数画像をモーダル表示するJavaScript記述

※「lightgallery.min.js」ファイルを読み込みます。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>