JavaScript

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

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

lightgallery.jsのソース元

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

複数画像をモーダル表示するサムネイル画像のCSS記述と読み込みcssファイル

※必要に応じて変更して下さい。
 「lightgallery.min.css」をcdnから読み込んでます。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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記述

※必要に応じて変更して下さい。

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

複数画像をモーダル表示するJavaScript記述と読み込みjsファイル

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

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

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

 

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