みなさん、こんにちは。どんぶラッコです。
今日は、こんなものを作ってみようと思います
See the Pen 画像を横並びにして、選択すると移動する by cha1ra (@cha1ra) on CodePen.
このように各画像をクリックすると…
ハイライトされている画像が変化するものです。
なんやかんやで調整が大変でした泣
実際に作ったサンプルがあるので、どのように書いているのか、一緒にみていきましょう！
HTML
<div class="container pt-5 pb-5">
<div class="row justify-content-center">
<div class="col-10 col-md-4">
<!-- ここから -->
<div class="thumbnails">
<div class="thumbnail thumbnail-selected">
<img src="https://picsum.photos/200/300?random=1" alt="">
</div>
<div class="thumbnail">
<img src="https://picsum.photos/200/300?random=2" alt="">
</div>
<div class="thumbnail">
<img src="https://picsum.photos/200/300?random=3" alt="">
</div>
<div class="thumbnail">
<img src="https://picsum.photos/200/300?random=4" alt="">
</div>
<div class="thumbnail">
<img src="https://picsum.photos/200/300?random=5" alt="">
</div>
</div>
<!-- ここまで -->
</div>
</div>
</div>.containerなどのクラスはbootstrapの機能を利用しているだけなので、ここでは気にしなくていいです。
重要なのは、 .thumbnails と .thumbnail。.thumbnail を増やせば画像を増やすこともできます。
HTMLの構造はそこまで難しくないですね。
CSS
.thumbnails {
display: flex;
justify-content: space-between;
}
.thumbnail {
position: relative;
width: 50px;
height: 50px;
border-radius: 8px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
opacity: 0.3;
}
.thumbnail-selected img {
opacity: 1;
}こちら一つずつ読んでいってもらえばわかりますね。
.thumbnail要素に対して display:flex を適用しています。
.thumbnails {
display: flex;
justify-content: space-between;
}justify-content パラメータを space-around にするなど、好きに調整しちゃってください。
表示される画像は、画像幅をサムネイル に合わせた上で、中央部分を表示するように設定されています。
はみ出した画像部分は overflow:hidden要素を使うことで非表示に設定しています。
もし横長の画像だった場合は、 .thumbnail img の幅と高さの指定を逆にしてあげましょう。
width: auto;
height: 100%; 画像は半透明にすることで、濃淡を表現しています。
.thumbnail-selected 要素がついているものは透明度指定なし、そうでない場合は透明度指定 ( opacity:0.3 )とすることでうまく切り替えをしていますね！
JavaScript(jQuery)
$(function() {
// 現在ハイライトされているインデックス番号を格納
let currentThumbnailIndex = 1
$('.thumbnail').on('click', function() {
const indexNum = $('.thumbnail').index(this) + 1
$(`.thumbnail:nth-child(${currentThumbnailIndex})`)
.removeClass('thumbnail-selected')
currentThumbnailIndex = indexNum
$(`.thumbnail:nth-child(${currentThumbnailIndex})`)
.addClass('thumbnail-selected')
})
})この文法はjQueryを使用しているので、 jQueryのCDNは読み込んでおいてください。
「jQueryってなんぞ？」となっている方は、ここら辺のページを確認してみてください！
そして、上記でやっていることは単純です。一度日本語にしてみましょう。
現在指定中の インデックスを格納しておく
サムネイル 画像のどれかがクリックされたら:
何番目の画像がクリックされたかを確認する
現在ハイライトされてる画像から thumbnail-selected クラスを取り除く
クリックされた要素に対して thumbnail-selected クラスを追加するこうやって考えると結構単純ですよね！
何番目の画像がクリックされたかを確認しているのが下記の部分です。
$('.thumbnail').on('click', function() {
const indexNum = $('.thumbnail').index(this) + 1
}index要素に this を使うことで、今クリックされた要素の順番が格納されていることがわかります。
ここで返される値は配列と同じく 0, 1, 2 … と0始まりです。
次に使うインデックス指定は 1, 2, 3 … と1から始まるものであるため +1 の処理を追記しています。
クラスを取り除いたり追加したりしているのはこの部分です。
$(`.thumbnail:nth-child(${currentThumbnailIndex})`).removeClass('thumbnail-selected')
// 追加の場合は addClassnth-child は N番目の小要素を取得できるやつですね。N番目という指定だから1, 2, 3 … と1から数える仕様なのでしょう。
頑張って作ったので笑 みなさんも是非使ってみてください！
