JavaScriptで小さな画像（サムネイル）をクリック（タップ）してメインの大きな画像を切り替える方法

JavaScript

昔からよく見かける動きですが、下のように「複数の小さな画像（サムネイル）をクリック（タップ）すると、メインの大きな画像が切り替わる」という機能を実装する機会がありました。

小さな画像をクリック（タップ）するとメインの大きな画像が切り替わる

この実装って、最近ではlabel,input要素を使って、JavaScriptを使わずに似たようなことができる方法もありますね。

私は通常はlabel,input要素を使って実装していますが、コードの書き方、見せ方によってはJavaScriptを使う必要もありました。

いろんなパターンで実装できることを覚えておくと、今後使える選択肢が増えるので、この機会にやりかたをメモ書きました。

クリック（タップ）で画像を切り替えるサンプル

codepenにサンプルを書きましたので「似たようなことがしたい」という場合は、ご参考ください。

html

<div id="content">
 <div id="featured_img">
 <img id="img" src="https://www.imamura.biz/blog/wp-content/uploads/image01.png">
 </div>
 <div id="thumb_img" class="cf">
 <img class="active" src="https://www.imamura.biz/blog/wp-content/uploads/image01_thumb.png" onclick="changeimg('https://www.imamura.biz/blog/wp-content/uploads/image01.png',this);">
 <img src="https://www.imamura.biz/blog/wp-content/uploads/image02_thumb.png" onclick="changeimg('https://www.imamura.biz/blog/wp-content/uploads/image02.png',this);">
 <img src="https://www.imamura.biz/blog/wp-content/uploads/image03_thumb.png" onclick="changeimg('https://www.imamura.biz/blog/wp-content/uploads/image03.png',this);">
 </div>
</div>

JavaScript

クリック（タップ）した際に「今その画像を表示しているよ」ということをわかりやすくするため、class名に「active」を付与してCSSで枠線を付けています。

「active」の処理がいらないな、という場合は、該当する箇所を削除してしまえばいいですね。（その場合は、3～8行目をごっそり削除できます）

function changeimg(url,e) {
 document.getElementById("img").src = url;
 let nodes = document.getElementById("thumb_img");
 let img_child = nodes.children; //id名「thumb_img」配下の子要素を取得
 for (i = 0; i < img_child.length; i++) { //要素の数ループさせる
  img_child[i].classList.remove('active') //要素に付与されているすべてのclass名「active」を削除する
 }
 e.classList.add('active'); //クリック（タップ）した要素にclass名「active」を付与する
}

CSS(SCSS)

.cf:before,
.cf:after{
 content:"";
 display:table;
}
 
.cf:after{
 clear:both;
}
 
.cf{
 zoom:1;
}

#content {
 max-width: 650px;
 margin: 3rem auto;
 text-align: center;
}

#featured_img img,
#thumb_img img {
 max-width: 100%;
}

#thumb_img {
 margin-top:2%;
 img {
 float:left;
 max-width: 32%;
 width: 32%;
 cursor: pointer;
 margin-right:2%;
 border:2px solid #eee;
 box-sizing:border-box;
 
 &.active{
 border:2px solid #cac6b8;
 }
 
 &:last-child{
 margin-right:0;
 }
 }
}

おまけ：srcset属性が指定されている場合はこうする

最近では、閲覧する端末（retinaなど）によって、読み込む画像を変更する「srcset」属性が指定されている場合も多くなってきました。

もし今回ご紹介したコードを使用して画像を切り替えたい場合は、src要素のURLだけ切り替えても「画像が変わらないじゃない！」ということがあります。

その場合は、src,srcsetそれぞれの属性に指定されている画像のURLを変更してあげればOKです。

secsetが指定されている場合も切り替えてあげる

function changeimg(url,e) {
 document.getElementById("img").src = url;
 document.getElementById("img").srcset = url;
 //途中省略
}

私はこんな感じで実装しましたが、他にももっといい方法があるかもしれませんね。もしご存知でしたら、ぜひともご教示いただけますとうれしいです。

著者:bouya Imamura