HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css" />
<link rel="stylesheet" type="text/css" href="css/6-2-1.css">body 内のギャラリーを表示させたい場所にHTML を記載します。
画像をリンクする<a>タグにdata-lightbox=”半角英数字で名前”をつけると、背景が暗くなって画像が出てくる仕様になります。
複数画像をグループ化したい場合は、data-lightbox=” 半角英数字で同一のグループ名”、
キャプションを入れたい場合はdatatitle=”キャプションタイトル”を設定してください。
<ul class="gallery">
<li><a href="img/01.jpg" data-lightbox="gallery1" data-title="キャプション"><img src="img/01.jpg" alt=""></a></li>
<li><a href="img/02.jpg" data-lightbox="gallery1" data-title="キャプション"><img src="img/02.jpg" alt=""></a></li>
<li><a href="img/03.jpg" data-lightbox="gallery1" data-title="キャプション"><img src="img/03.jpg" alt=""></a></li>
<li><a href="img/04.jpg" data-lightbox="gallery1" data-title="キャプション"><img src="img/04.jpg" alt=""></a></li>
</ul>body 終了タグ直前に jQuery、Lighbox、動きを制御する自作のJS （任意）の3 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js"></script>
<!--自作のJS-->
<script src="js/6-2-1.js"></script>
CSSの書き方
/*==================================================
ギャラリーのためのcss
===================================*/
.gallery{
columns: 4;/*段組みの数*/
padding:0 15px;/*ギャラリー左右に余白をつける*/
margin:0;
}
.gallery li {
margin-bottom: 20px;/*各画像下に余白をつける*/
list-style:none;
}
/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
width:100%;
height:auto;
vertical-align: bottom;/*画像の下にできる余白を削除*/
}
/*横幅900px以下の段組み設定*/
@media only screen and (max-width: 900px) {
.gallery{
columns:3;
}
}
@media only screen and (max-width: 768px) {
.gallery{
columns: 2;
}
}
JSの書き方
※下記は任意の設定です。書かなくても動作します。
//lightbox オプションの設定※https://lokeshdhakar.com/projects/lightbox2/#options参照
lightbox.option({
'wrapAround': true,//グループ最後の写真の矢印をクリックしたらグループ最初の写真に戻る
'albumLabel': ' %1 / total %2 '//合計枚数中現在何枚目かというキャプションの見せ方を変更できる
})