複数画像をスライドでモーダル表示するJavaScriptライブラリは多数ありますが、今回はjQuery不要で簡単に設定できるlightgallery.jsを使って複数画像をモーダル表示する方法をご紹介します。
Contents
ディスプレイ広告
lightgallery.jsを使って複数画像をモーダル表示するサムネイル画像のCSS記述
※lightgallery.min.cssファイルをcdnから読み込みます。その他、サムネイル表示エリア(#default)のCSS記述です。必要に応じて変更して下さい。
<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" />
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>
jQuery不要のlightgallery.jsで複数スライド画像をモーダル表示するデモページ
JjQuery不要のlightgallery.jsで複数スライド画像をモーダル表示するデモ
lightgallery.jsのソース元
以下がソース元になります。
lightgallery.js
※流用される場合は自己責任でお願いします。
デモページ