【jQuery】サムネイルで切り替わるギャラリー
ギャラリー
今回作成するのは「ギャラリー」機能です。
サムネイルが何枚か並んでいて、いずれかをクリックすると上のメイン画像が切り替わる、というもの。よく見かける仕様ですね。（画像のイラストは全て僕が描いています。格好良いでしょ？）
実際のコード
自画自賛もほどほどに、ポンポン進みます。
HTML・CSS・jQueryの実際のコードを、それぞれ順番に見ていきましょう。
<body>
<main>
<div class="large">
<img src="img/01.jpg" alt="">
</div>
<div class="thumb">
<ul class="thumb__list">
<li class="thumb__item">
<img src="img/01.jpg" alt="">
</li>
<li class="thumb__item">
<img src="img/02.jpg" alt="">
</li>
<li class="thumb__item">
<img src="img/03.jpg" alt="">
</li>
<li class="thumb__item">
<img src="img/04.jpg" alt="">
</li>
</ul>
</div>
</main>
</body>main {
width: 800px;
margin: 0 auto;
padding-top: 50px;
}
.large {
text-align: center;
margin-bottom: 30px;
}
.large img {
position: relative;
width: 300px;
height: auto;
}
.thumb__list {
display: flex;
justify-content: center;
}
.thumb__item {
margin-right: 20px;
}
.thumb__item:last-of-type {
margin-right: 0;
}
.thumb__item img {
height: 100px;
width: auto;
}(function(){
$('.thumb__item').on('click',function(){
var number = $(this).find('img').attr('src');
$('.large img').attr('src', number);
});
});ポイント
今回の仕組みを考えるにあたり、大まかな流れとして三つのステップに分けました。
1.サムネイル（.thumb__item）をクリックした時に
2.その中にあるimgタグのsrc属性を取得して、変数に格納
3.メイン画像（.large img）のsrc属性を上の変数で上書き
上のステップに従ってコードを書いていこうとなった時に、「src属性の取得・変更って、どうやるの？」という点が要になると思います。
そこで活躍してくれるのが、attrメソッドです。
html要素の属性（classとかhrefとか。もちろん”src”も含まれます）を取得・変更・追加できるメソッドになります。今回のシステムにおいてどうやって使用しているか、実際のコードを見ながら確認していきましょう。
var number = $(this).find('img').attr('src');【 対象.attr( 属性, （変更する値） ) 】という記述が基本的な形式になります。
ここでは、クリックされた要素（this）の中のimg（findメソッドで見つけたimg要素）に続けてattr(‘src’)と記述することで、このimgのsrc属性を取得しています。
$('.large img').attr('src', number);取得したsrc属性を変数：numberに格納したら、今度はメインとなる画像（.large img）のsrc属性を上書きしましょう。記述形式は先ほどとほとんど同じですが、属性を変更する場合のみ第2引数（ここではnumberに該当します）を書いてあげます。これにより変数の上書きが実行され、画像の内容も切り替わることになります。
以上で完成です！
