ファイル構成は下の図のようになっています。
今回は、「images」フォルダはダウンロードしたものをそのままサイトに設置し、サムネイルに使用する画像は「img」フォルダに置きました。
root_folder/
├── css/
| ├── lightbox.min.css
| └── style.css
├── images/
| ├── close.png
| ├── loading.gif
| ├── next.png
| └── prev.png
├── img/
├── index.html
└── js/
└── lightbox-plus-jquery.min.js
HTML
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Lightbox2-Sample</title>
<link rel="stylesheet" href="css/lightbox.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>"Lightbox2"動作サンプル</h1>
<p>"<a href="https://lokeshdhakar.com/projects/lightbox2/" target="_blank" rel="noopener nofollow">Lightbox2</a>"を使用してサムネイルを拡大してポップアップ表示させるサンプルです。</p>
<div class="image-box">
<a href="img/house.jpg" data-lightbox="images" data-title="家"><img class="thumbnail" src="img/house.jpg"></a>
<a href="img/mountain.jpg" data-lightbox="images" data-title="山"><img class="thumbnail" src="img/mountain.jpg"></a>
<a href="img/pillar.jpg" data-lightbox="images" data-title="柱"><img class="thumbnail" src="img/pillar.jpg"></a>
<a href="img/sea.jpg" data-lightbox="images" data-title="海"><img class="thumbnail" src="img/sea.jpg"></a>
<a href="img/splash.jpg" data-lightbox="images" data-title="滝"><img class="thumbnail" src="img/splash.jpg"></a>
<a href="img/sunset.jpg" data-lightbox="images" data-title="夕焼け"><img class="thumbnail" src="img/sunset.jpg"></a>
</div>
<script src="js/lightbox-plus-jquery.min.js"></script>
<script>
lightbox.option({
'fadeDuration': 700,
'imageFadeDuration': 1800,
'resizeDuration': 300,
'alwaysShowNavOnTouchDevices': true,
'wrapAround': true
})
</script>
<!-- The MIT License (MIT) Copyright (c) 2015 Lokesh Dhakar -->
</body>
CSS
.image-box {
width: 85%;
margin: 0 auto 100px;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
}
@media (min-width: 768px) {
.image-box {
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}
}
@media (min-width: 1024px) {
.image-box {
grid-template-columns: repeat(6, 1fr);
justify-items: center;
}
}
.thumbnail {
width: 130px;
height: 130px;
}