コーディング Web制作 jQuery

【jQuery】サムネイルをクリックするとメイン画像が切り替わる方法

【jQuery】サムネイルをクリックするとメイン画像が切り替わる方法
サムネイルをクリックするとメインの画像が切り替わる方法ない?

今回はそんな疑問にお答えします。

1つの商品に対して3方向から撮った写真をサムネイルにして、クリックするとメインの大きい画像が切り替わるといった感じのイメージです。

言葉だと少し分かりにくいので、例を見た方が早いですねw

効率よくコーディングしたい人はこちら

サムネイルをクリックでメイン画像が切り替わる方法(完成形)

早速完成形を見てみましょう(コードを見るには左上のHTML、CSSをクリックして下さい)

See the Pen
サムネイルクリックでメイン画像切り替え
by junpei (@junpei-sugiyama)
on CodePen.

 

コードの解説

基本的にコピペでOKなのであまり書くことはないのですが、いくつか補足します。

htmlのclass名についてですが、js を使用する箇所については js- を付けています。

これによりここは js を使用する箇所だなと分かります。

 

imgタグについては完成形のコードだと少し見にくいですが、こうなっています。

<div class="container">
  <div class="main-img js-main-img">
    <img src="画像1"/>
  </div>
  <ul class="sub-img js-sub-img">
    <li class="current"><!-- アクティブな画像の枠線を変更 -->
      <img src="画像1"/>
    </li>
    <li>
      <img src="画像2"/>
    </li>
    <li>
      <img src="画像3"/>
    </li>
  </ul>
</div>

左のサムネイルを初期表示とした場合、メイン画像のsrcと左の画像のsrcを同じにします。

次にjsのコードを見てみます。

$(function () {
  $(".js-sub-img img").on("click", function () {
    // mainに切り替えるimgのsrc取得
    img = $(this).attr("src");
    // currentクラス付け替え(枠線などを変えたい時に)
    $(".js-sub-img li").removeClass("current");
    $(this).parent().addClass("current");
    // fadeOutできたらsrc変更してfadeIn
    $(".js-main-img img").fadeOut(50, function () {
      $(".js-main-img img")
        .attr("src", img)
        .on("load", function () {
          $(this).fadeIn();
        });
    });
  });
});

fadeOut と fadeIn の後にある500という数値ですが、フェードの時間になります。

単位はミリ秒なので、ここでは500ミリ秒=0.5秒となります。

ここは自由に書き換えてOKです。

 

cssについてはデザインによって変わってくると思うので、適宜変更してみて下さい。

以上です。

 


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-コーディング, Web制作, jQuery
-