JavaScriptを使ってサムネイル画像を切り替える方法

イメージ↓

JavaScriptを使ってimageの差し替えを実装しました！

＊ただの備忘録になっていることをご了承ください

手順

1.HTMLファイルを作成し、画像のimageを貼る
2.cssでコーディング
3.JavaScriptで画像をクリックした時のメソッドを書いていく

ざっくりすぎますね笑　実際に書いていって説明します。

HTMLを書く

<div class="center">
  <div>
  　<img src="img1.jpg" id="bigimg">
  </div>
  <ul>
    <li><img src="thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li>
    <li><img src="thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li>
    <li><img src="thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li>
    <li><img src="thumb-img4.jpg" class="thumb" data-image="img4.jpg"></li>
  </ul>
 </div>

親要素を設置して直下にid="bigimg"を保持したimgタグを設置。
これは後ほどgetElementByIdで取得させる必要があるので属性を追加しておく。
ulタグを作成し、listタグの中にサムネイルに表示させたい画像を格納する。ここで登場するのがdata-image属性です。

data-image属性って？

この属性ですがdata-image属性というのは存在しておらず、正しくはdata-'なんでもいい'属性です。（別名カスタムデータ属性)
簡単にいうとこんな感じ、今回はimageという名前を付けていますが基本的にはなんでもいいのです。

data-*属性を使う理由

HTMLタグの中にデータを埋め込んでJavascriptからその値を読み取ったり書き換えたりするのに使います。
後々このdata-image属性をJavaScriptのメソッドで呼び出すので書いておきます。

CSSでコーディング

ここは別に割愛してもいいと思ったのですがそれっぽく見せるために一応CSSでコーディングしていきます。

section img{
  max-width: 100%;
}
.center{
  margin: 0 auto 0 auto;
  max-width: 90%;
  width: 500px;
}
.center ul{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.center li{
  flex: 1 1 auto;
  margin-right: 8px;
}
li:last-of-type{
  margin-right: 0;
}

ここの解説は省きますがこのような感じで以下のような見た目になります。

当然ですがここで画像をクリックしても何もおきません。
~~ただ鳥がカッコつけてるだけです~~

JavaScriptを書く

さぁここからが本題です。JavaScriptを書いていきます。


const thumbs = document.querySelectorAll('.thumb');
 //cssセレクタの '.thub'を取得して定数thumbsに代入
 console.log(thumbs);  //一旦コンソールで値が格納されているか確認しておきます

こんな感じで画像が配列に格納された状態になっていればオッケーです。
querySeleAllメソッドでcssセレクタの.thumbを取得しています。

const thumbs = document.querySelectorAll('.thumb');
  // console.log(thumbs);
thumbs.forEach(function(item,index){
 item.onclick = function(){
  document.geElementById('bigimg').src = this.dataset.image;
 }
});

thubs.forEachの中にファンクションがありファンクションの中には(item,index)のパラメーターがあります。
itemというのは先ほどのコンソールで確認したimg要素で、indexというのは配列番号です。
何を切り返し処理しているかというと、item.clickイベントが発火した時に最終行のdocument.getElementByIdで'bigimg'idを取得し、src属性を最初にHTMLに記述したdata-image属性に置き換えます。
this.dataset.imageでdata-*属性に置き換えています。

これでクリックイベントが発火した時'bigimg'のところにdata-imageが入ってきてbigimgのサムネイルが変更されるという仕組みです。

取得した要素.属性 = 値;

今回だと

document.geElementById('bigimg').src = this.dataset.image;

この部分ですね。

ちょっと最後の方の説明が難しかったですがざっくりとこんな感じです。
完成ソースコードを載せて終わりにします！

const thumbs = document.querySelectorAll('.thumb');
 // console.log(thumbs);
 thumbs.forEach(function(item,index){
   item.onclick = function(){
     document.getElementById('bigimg').src = this.dataset.image;
   }
 });

<div class="center">
    <div>
      <img src="img1.jpg" id="bigimg">
    </div>
    <ul>
      <li><img src="thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li>
      <li><img src="thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li>
      <li><img src="thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li>
      <li><img src="thumb-img4.jpg" class="thumb" data-image="img4.jpg"></li>
    </ul>
  </div>

以上です！気になった点があればコメントお待ちしています chu☆