複数の画像を一覧で見せる | 動くWebデザインアイディア帳

ギャラリー
-複数の画像を一覧で見せる-

デモページを見る

See the Pen 6-2-1 複数の画像を一覧で見せる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね！

動きを実現する仕組み

CSS のcolumns を使って段組みを表示する。
画像をクリックして拡大するためにLightbox というJavaScript ライブラリを利用する。

［使用するライブラリ］
＊ jQuery
＊ Lightbox（https://lokeshdhakar.com/projects/lightbox2/）

HTMLの書き方

head終了タグ直前にLightboxのCSSと自作のCSSの2つを読み込みます。

<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">
</head>

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

自作の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 '//合計枚数中現在何枚目かというキャプションの見せ方を変更できる
})