Blog スタッフブログ

JavaScript WEB制作

[jQuery]簡単なギャラリーを実装

WEB制作担当の木戸です。

jQueryを使った画像サムネイルのクリックで切り替わるギャラリーの作り方をご紹介します。

事前にjQueryのを読み込みます。

https://jquery.com/

設定方法

手順.1 htmlの準備

一番最初に表示しておきたい画像にclass=”active”をつけます。

画像が増えた場合でもhtmlだけ修正すれば対応できます。

<div id="photo_container">
  <ul class="photo_main">
    <li id="item0" class="active"><img src="/images/gallery01.jpg" alt="拡大画像01" /></li>
    <li id="item1"><img src="/images/gallery02.jpg" alt="拡大画像02" /></li>
    <li id="item2"><img src="/images/gallery03.jpg" alt="拡大画像03" /></li>
    <li id="item3"><img src="/images/gallery04.jpg" alt="拡大画像04" /></li>
  </ul>
  <ul class="photo_thumb">
    <li id="thumb0"><img src="/images/gallery01_thum.jpg" alt="サムネイル01" /></li>
    <li id="thumb1"><img src="/images/gallery02_thum.jpg" alt="サムネイル02" /></li>
    <li id="thumb2"><img src="/images/gallery03_thum.jpg" alt="サムネイル03" /></li>
    <li id="thumb3"><img src="/images/gallery04_thum.jpg" alt="サムネイル04" /></li>
  </ul>
</div>

手順.2 cssの準備

画像の並び方などを調整します。

classにactiveがついているものだけ表示されるようにします。

activeの位置は何番目でも問題ありません。

#photo_container{
	margin-top: 30px;
}

.photo_main li{
	display: none;
	text-align: center;
}

.photo_main li.active{
	display: block;
}

.photo_main li img{
	max-height: 600px;
}

.photo_thumb{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30px auto;
}

.photo_thumb li{
	width: 100%;
	text-align: center;
	padding: 14px;
	max-width: 173px;
}

手順.3 jsの準備

サムネイルをクリックした際、同じ順番にある拡大画像クラスにactiveを追加して、それ以外の画像を非表示にします。

$('.photo_thumb li').click(function(){
		//クリックしたボタンのIDを取得して数字以外を除去
		var btnId = $(this).attr('id');
		btnId = btnId.replace('thumb', '');
		//class="active"を付与
		var switchTab = $('.photo_main li').eq(btnId).addClass('active');
		//兄弟要素から class="active"を削除
		$(switchTab).siblings().removeClass('active');
	});
戻る一覧へ戻る