WEBサイト制作・アプリ開発・システム開発・ブランディングデザイン制作に関するご相談はお気軽にご連絡ください。
構想段階からじっくりとヒアリングし、お客様の課題にあわせたアプローチ手法でお客様の“欲しかった”をカタチにしてご提案いたします。
Blog スタッフブログ
JavaScript
WEB制作
[jQuery]簡単なギャラリーを実装
WEB制作担当の木戸です。
jQueryを使った画像サムネイルのクリックで切り替わるギャラリーの作り方をご紹介します。
事前にjQueryのを読み込みます。
設定方法
手順.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');
});
![](https://mixltd.jp/cms/wp-content/uploads/22020912_img01.jpg)