はじめに

　サムネイル2段の画像切り替えで表示する機能を実施したので共有します。

開発環境

　jQuery:3.4.1

実装手順

完成イメージ

HTMLサンプルファイル

HTMLファイルを作成します。Railsを使っている場合は、最初に表示する画像をメイン画像に表示して、サムネイルは配列に入れた複数画像をeach文で表示すると同様に実装できます。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    <link rel="stylesheet" href="sample.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="imageSwitching.js"></script>
  </head>
  <body>
    <div class="image">
      <div class="image__main">
        <img class="image__main__photo" src="https://picsum.photos/id/1/300/300" alt="main" width="300" height="300" />
      </div>
      <div class="image__sub">
        <div class="image__sub__thumb">
          <img class="image__sub__thumb__photo" src="https://picsum.photos/id/1/300/300" alt="sub" width="60" height="60" />
        </div>
        <div class="image__sub__thumb">
          <img class="image__sub__thumb__photo" src="https://picsum.photos/id/10/300/300" alt="sub" width="60" height="60" />
        </div>
        <div class="image__sub__thumb">
          <img class="image__sub__thumb__photo" src="https://picsum.photos/id/20/300/300" alt="sub" width="60" height="60" />
        </div>
        <div class="image__sub__thumb">
          <img class="image__sub__thumb__photo" src="https://picsum.photos/id/30/300/300" alt="sub" width="60" height="60" />
        </div>
        <div class="image__sub__thumb">
          <img class="image__sub__thumb__photo" src="https://picsum.photos/id/43/300/300" alt="sub" width="60" height="60" />
        </div>
        <div class="image__sub__thumb">
          <img class="image__sub__thumb__photo" src="https://picsum.photos/id/50/300/300" alt="sub" width="60" height="60" />
        </div>
        <div class="image__sub__thumb">
          <img class="image__sub__thumb__photo" src="https://picsum.photos/id/60/300/300" alt="sub" width="60" height="60" />
        </div>
        <div class="image__sub__thumb">
          <img class="image__sub__thumb__photo" src="https://picsum.photos/id/70/300/300" alt="sub" width="60" height="60" />
        </div>
        <div class="image__sub__thumb">
          <img class="image__sub__thumb__photo" src="https://picsum.photos/id/80/300/300" alt="sub" width="60" height="60" />
        </div>
        <div class="image__sub__thumb">
          <img class="image__sub__thumb__photo" src="https://picsum.photos/id/90/300/300" alt="sub" width="60" height="60" />
        </div>
      </div>
    </div>
  </body>
</html>

CSSサンプルファイル

サムネイル画像同士の間に余白ができることがありますが、以下のcssの書き方であれば余白なしのサムネイル表示になります。

sample.css

.image {
  margin: 0 auto;
  min-width: 300px;
  max-width: 300px;
  min-height: 375px;
  position: relative;
  background-color: #fafafa;
}

.image__main__photo {
  width: 100%;
  vertical-align: bottom;
}
.image__sub {
  line-height: 0;
  height: 120px;
}
.image__sub__thumb {
  display: block;
  float: left;
  width: 60px;
  height: 60px;
  cursor: pointer;
}
.image__sub__thumb__photo {
  padding: 0;
  margin: 0；
}
.image__sub__thumb:not(.active) {
  opacity: 0.4;
}

JSサンプルファイル

jQueryは下記のように書いています。

imageSwitching.js

$(function () {
  $(".image__sub__thumb").first().addClass("active"); // 1枚目の小画像をアクティブに変更
  $('.image__sub__thumb__photo').click(function () { // 小画像がクリックされたらイベント発火
    image_url = $(this).attr("src"); // クリックされた画像のPATHを取得
    $(".image__main__photo").attr("src", image_url).hide().fadeIn(); // メイン画像をクリックされた画像に変更
    $(".image__sub__thumb.active").removeClass("active"); // 1枚目の小画像のアクティブを無効化
    $(this).parent().addClass("active"); // クリックされた小画像をアクティブに変更
  });
});

動作デモ

See the Pen ImageSwitching by tiphp452 (@tiphp452) on CodePen.

まとめ

jQueryを用いて画像切り替えを実装できました。
1段のサムネイルのカルーセル向けの便利なjQueryプラグインもあります。
2段のサムネイルはプラグイン活用よりも自作の方が作りやすい印象でした。