ライトボックスは、サムネイル画像をクリックさせて拡大画像を表示させる機能です。ギャラリーとも呼ばれます。
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真ギャラリー（colorbox）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから（※1））▼▼▼ -->
<link rel="stylesheet" href="css/colorbox.css" type="text/css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* 写真ギャラリー（colorbox）の設定 */
.colorbox {
overflow: hidden;
}
.colorbox a {
width: calc(100% / 6); /* 写真の枚数 */
padding: 5px;
text-align: center;
float: left;
}
@media screen and (max-width: 760px) {
.colorbox a {
width: calc(100% / 3); /* 写真の枚数 */
font-size: 0.6em;
}
}
.colorbox a img {
width: 100%;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- 写真ギャラリー（colorbox）の定義 -->
<div class="colorbox">
<a class="gallery" href="images/sample-01.jpg" title="アメリカ1"><img src="images/sample-01.jpg" alt="アメリカ1">アメリカ1</a>
<a class="gallery" href="images/sample-02.jpg" title="アメリカ2"><img src="images/sample-02.jpg" alt="アメリカ2">アメリカ2</a>
<a class="gallery" href="images/sample-03.jpg" title="ドイツ1"><img src="images/sample-03.jpg" alt="ドイツ1">ドイツ1</a>
<a class="gallery" href="images/sample-04.jpg" title="ドイツ2"><img src="images/sample-04.jpg" alt="ドイツ2">ドイツ2</a>
<a class="gallery" href="images/sample-05.jpg" title="シンガポール1"><img src="images/sample-05.jpg" alt="シンガポール1">シンガポール1</a>
<a class="gallery" href="images/sample-06.jpg" title="シンガポール2"><img src="images/sample-06.jpg" alt="シンガポール2">シンガポール2</a>
</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- 写真ギャラリー（colorbox）の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
<script src="js/jquery.colorbox-ja.js" type="text/javascript"></script>
<script>
$(function() {
$(".gallery").colorbox({
rel: 'slideshow',
slideshow: true,
slideshowSpeed: 3000,
maxWidth: "80%",
maxHeight: "80%",
opacity: 0.7
});
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ライトボックス（lightbox）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" href="css/lightbox.min.css" type="text/css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ライトボックス（lightbox）の設定 */
.wrapper {
overflow: hidden;
}
.wrapper a {
width: calc(100% / 6); /* 写真の枚数 */
padding: 5px;
text-align: center;
float: left;
}
@media screen and (max-width: 760px) {
.wrapper a {
width: calc(100% / 3); /* 写真の枚数 */
font-size: 0.6em;
}
}
.wrapper a img {
width: 100%;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- ライトボックス（lightbox.min.css）の定義 -->
<div class="wrapper">
<a href="images/sample-01.jpg" data-lightbox="demo-group" data-title="アメリカ1"><img src="images/sample-01.jpg" alt="アメリカ1">アメリカ1</a>
<a href="images/sample-02.jpg" data-lightbox="demo-group" data-title="アメリカ2"><img src="images/sample-02.jpg" alt="アメリカ2">アメリカ2</a>
<a href="images/sample-03.jpg" data-lightbox="demo-group" data-title="ドイツ1"><img src="images/sample-03.jpg" alt="ドイツ1">ドイツ1</a>
<a href="images/sample-04.jpg" data-lightbox="demo-group" data-title="ドイツ2"><img src="images/sample-04.jpg" alt="ドイツ2">ドイツ2</a>
<a href="images/sample-05.jpg" data-lightbox="demo-group" data-title="シンガポール1"><img src="images/sample-05.jpg" alt="シンガポール1">シンガポール1</a>
<a href="images/sample-06.jpg" data-lightbox="demo-group" data-title="シンガポール2"><img src="images/sample-06.jpg" alt="シンガポール2">シンガポール2</a>
</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ライトボックス（lightbox）の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/lightbox.min.js" type="text/javascript"></script>
<script>
lightbox.option({
'alwaysShowNavOnTouchDevices': false, // trueにするとスマホでスライドの矢印を常に表示
'albumLabel': "写真 %1 of %2", // スライドの画像番号のテキストを変更できる
'disableScrolling': false, // trueにするとLightboxが開いている時はスクロール禁止
'fadeDuration': 600, // Lightboxのフェードイン、フェードアウトの時間を指定
'fitImagesInViewport': true, // trueにするとLightbox画像が画面に収まるように縮小される
'imageFadeDuration': 600, // 読み込まれてから画像がフェードインするまでの時間を設定
'maxWidth': 900, // 画像の最大幅を設定
'maxHeight': 900, // 画像の最大高さを設定
'positionFromTop': 50, // Lightboxコンテナの表示領域上からの位置を設定
'resizeDuration': 700, // 異なるサイズの画像を表示する際のアニメーションの時間を設定
'showImageNumberLabel': true, // falseにすると画像番号が非表示になる
'wrapAround': true, // trueにすると最後のスライド画像の後に最初のスライド画像に戻る
})
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
