画像をクリックすると次の画像に遷移するjquery（通販サイト商品詳細画面）

前提・実現したいこと

カラーミーで通販サイトの商品ページをカスタマイズしています。
・現状
サムネイルをクリックするとメインイメージ写真が入れ替わるのみ

・こう変えたい
上記に加えて、メインイメージ写真をクリックした時にも、サムネイルがメインイメージ写真の場所に表示されるようにしたい

・条件
サムネイルは商品ごとに写真枚数が違う
メインイメージをクリックするどんどん隣のサムネイルがメインイメージの場所に表示され、最後まで行くと最初に戻るループにしたい

該当のソースコード

html
1<div class="container-section product-image col-md-12 col-lg-7 col">
2        <div class="product-image-main" style="height: 440px;">
3        <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o3.jpg?cmsp_timestamp=20200619112104" class="mainImage" style="max-height: 440px; display: block;"></div>
4                  <div class="product-image-thumb grid_row">
5            <ul>
6               <li class="col-lg-3 col" style="height: 101.219px;">
7                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
8                </li>
9                <li class="col-lg-3 col" style="height: 101.219px;">
10                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o1.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
11                </li>
12                <li class="col-lg-3 col" style="height: 101.219px;">
13                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o2.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
14                </li>
15                                                              <li class="col-lg-3 col" style="height: 101.219px;">
16                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o3.jpg?cmsp_timestamp=20200619112104" class="thumb thumb-active" style="max-height: 101.219px;">
17                </li>
18                                                              <li class="col-lg-3 col" style="height: 101.219px;">
19                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o4.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
20                </li>
21                <li class="col-lg-3 col" style="height: 101.219px;">
22                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o5.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
23                </li>
24                                                              <li class="col-lg-3 col" style="height: 101.219px;">
25                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o6.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
26                </li>
27　　　　　　　　</ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
28          </div>
29　　　　</div>

該当のソースコード

css
1.thumb {
2  max-width: 100%;
3  width: auto;
4  height: auto;
5  border: 1px solid #dbdbdb;
6}
7.thumb-active {
8  border: 1px solid <{$current_color}>;
9}

javaScript
1
2    $('img.thumb').click(function(){
3
4      $(this).parent().siblings().children().removeClass('thumb-active');
5
6      var selectedSrc = $(.thumb).attr('src');
7      $('img.mainImage').stop().fadeOut(300,
8        function(){
9          $('img.mainImage').attr('src', selectedSrc);
10          $('img.mainImage').fadeIn(300);
11        }
12      );
13
14      $(this).addClass('thumb-active');
15
16    });
17});

javaScript
1
2    $('img.thumb').click(function(){
3
4      $(this).parent().siblings().children().removeClass('thumb-active');
5
6      var selectedSrc = $(.thumb).attr('src');
7      $('img.mainImage').stop().fadeOut(300,
8        function(){
9          $('img.mainImage').attr('src', selectedSrc);
10          $('img.mainImage').fadeIn(300);
11        }
12      );
13
14      $(this).addClass('thumb-active');
15
16    });	
17    $('img.mainImage').click(function(){
18
19      $(this).parent().siblings().children().removeClass('thumb-active');
20
21      var selectedSrct = $('img.thumb').next().attr('src');
22      $('img.mainImage').stop().fadeOut(300,
23        function(){
24          $('img.mainImage').attr('src', selectedSrct);
25          $('img.mainImage').fadeIn(300);
26        }
27      )
28
29      $(this).addClass('thumb-active');
30			 });		
31  });

試したこと

jsのコード追加（ $('img.mainImage').click(function(){以降を追加しています）

selectedSrctという変数を作って、thumbのsrcをクリックするごとに取得するようにし、
mainImageをクリックした際に、その変数が発動してメインイメージの場所に表示されるようにしたいのですが、、、
今のままだと、クリックをするごとに、サムネイルを反映しないママのメインイメージがただフェードインアウトを繰り返すだけになっています。
クリックするごとに隣のサムネイルのsrcを取得させるには、どのようにすればよろしいでしょうか。

kuma_kuma_

2020/09/23 02:31

すみませんが、表示が崩れていますので修正おねがいします。また「現状」と言われているソースも記載されたほうが良いかと思います。

sala_33

2020/09/23 03:26

ご指摘ありがとうございます。更新しました。現状は、１つ目のJS,私が加筆したのが２つ目のJSです。お分かりの方、どうぞよろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

だいぶ苦戦された様子ですね。
(ソースから読み取れました。)

問題は次の「サムネイル画像」は何か？という点ですが
今回は元からある「現在選択されているサムネイル画像にはclassに'thumb-active'追加する」
を利用してサムネイル画像一覧から検索をかけて現在表示を判断しています。
あとはその次ですので+1すれば良いだけです。

細かい点はソースにコメントしてあります。
参考にして下さい。

Javascript
1$(function(){
2	// サムネイル画像クリック時の処理登録(元のままです)
3	$('img.thumb').click(function(){
4		// サムネイル画像クリック時の処理
5
6		$(this).parent().siblings().children().removeClass('thumb-active');
7
8		var selectedSrc = $('.thumb').attr('src');
9		$('img.mainImage').stop().fadeOut(300,
10			function(){
11				$('img.mainImage').attr('src', selectedSrc);
12				$('img.mainImage').fadeIn(300);
13			}
14		);
15
16		$(this).addClass('thumb-active');
17
18	});
19
20	// メインイメージ写真画像クリック時の処理登録(今回追加分)
21	$('img.mainImage').click(function(){
22		var thumbs = $('img.thumb');	// サムネイル画像一覧を取得
23		var imgnowno = 0;				// 現在のサムネイル画像
24		var imgnextno = 0;				// 次のサムネイル画像
25		for(var i = 0; i < thumbs.length; i++){
26			// 現在表示されている画像か判定
27			if(thumbs[i].className.indexOf('thumb-active') >= 0){
28				// 現在表示されている画像取得
29				imgnowno = i;
30				// 現在表示されている画像の次を取得
31				imgnextno = i + 1;
32				if (imgnextno >= thumbs.length){
33					// 現在表示されている画像がサムネイルの最後だった場合最初に戻る
34					imgnextno = 0;
35				}
36				break;
37			}
38		}
39		
40		// ここから先はサムネイルのクリック時と同じ動きです。
41		// 現在選ばれているサムネイル画像からclass='thumb-active'を削除
42		$(thumbs[imgnowno]).removeClass('thumb-active');
43
44		// 次に表示する画像URLを取得
45		var selectedSrc = $(thumbs[imgnextno]).attr('src');
46		// 画像のアニメーション表示(フェードアウト・フェードイン)
47		$('img.mainImage').stop().fadeOut(300,
48			function(){
49				$('img.mainImage').attr('src', selectedSrc);
50				$('img.mainImage').fadeIn(300);
51			}
52		);
53
54		// 新しく選択されたサムネイル画像にclass='thumb-active'を追加
55		$(thumbs[imgnextno]).addClass('thumb-active');
56
57	});
58});
59