サムネイル画像の拡大表示時のレイアウト崩れ

お世話になっております。
タイトルについて、解決方法がわからず悪戦苦闘しております。
皆様のお力を拝借したく、どうかよろしくお願いします。

前提・実現したいこと

アマゾンの商品ページの写真のように、サムネイル画像をクリックするとメイン画像部分が切り替わる仕様を実装したい。

方法

・html,cssでメイン画像の下に小さなサムネイル画像を３つ並べ、その右側に説明文と問合せボタンを設置
・jqueryのclickイベントでサムネイルクリック時に、メイン画像部分に表示されるように記述
・メイン画像表示時は、fadeで画像が切り替わる仕様に

該当のソースコード

html
1<div class="workDetail__media__wrapper">
2            <div class="workDetail__media">
3              <div class="workDetail__media__left">
4                <p class="workDetail__media__ttl">商品名</p>
5                <div class="workDetail__media__image__wrapper">
6                  <div id="js_mainImg">
7                    <img class="workDetail__media__image--large" src="https://i.postimg.cc/jSycsdPV/alana-harris-Dc-Dp-N80-KB4-I-unsplash-Photo-by-Alana-Harris-on-Unsplash.jpg" width="360px" height="408px" />
8                  </div>
9                  <ul id="js_subImg" class="workDetail__media__image--smallItems">
10                    <li class="current"><img class="workDetail__media__image--small" src="https://i.postimg.cc/jSycsdPV/alana-harris-Dc-Dp-N80-KB4-I-unsplash-Photo-by-Alana-Harris-on-Unsplash.jpg" width="100px" height="100px" /></li>
11                    <li><img class="workDetail__media__image--small" src="https://i.postimg.cc/tCkPDZ34/gabriel-forsberg-9s-M53e9w-TTY-unsplash-Photo-by-Gabriel-Forsberg-on-Unsplash.jpg" width="100px" height="100px" /></li>
12                    <li><img class="workDetail__media__image--small" src="https://i.postimg.cc/50Pdnm2m/jean-philippe-delberghe-t-SXh-Gzk-E7o-U-unsplash-Photo-by-Jean-Philippe-Delberghe-on-Unsplash.jpg" width="100px" height="100px" /></li>
13                  </ul>
14                </div>
15              </div>
16              <!-- workDetail__media__left -->
17              <div class="workDetail__media__right">
18                <dl class="workDetail__media__txtBox">
19                  <dt>サイズ（mm）</dt>
20                  <dd>L1500 W2000 H2100</dd>
21                  <dt>重さ</dt>
22                  <dd>３0kg</dd>
23                  <dt>料金</dt>
24                  <dd>１０，０００円</dd>
25                  <dt>説明</dt>
26                  <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
27                </dl>
28                <a href="#partContact" class="workDetail__media__contact contactBtn attention">お問い合わせはコチラ</a>
29              </div>
30  </div>

scss
1.workDetail {
2  &__media {
3    display: flex;
4    justify-content: center;
5    align-items: flex-end;
6    width: 70vw;
7    padding: 5rem;
8    margin: 0 auto;
9    background-color: #f7f7f7;
10    box-shadow: 2px 2px 8px inset;
11    &__left {
12      display: flex;
13    }
14    &__ttl {
15      writing-mode: vertical-rl;
16      padding: 2rem;
17      font-size: 2.4rem;
18    }
19    &__image {
20      &__wrapper {
21        padding: 2rem 3rem;
22      }
23      &--smallItems {
24        display: flex;
25        justify-content: space-between;
26      }
27      &--large {
28        box-shadow: 4px 4px 12px gray;
29      }
30      &--small {
31        box-shadow: 4px 4px 12px gray;
32      }
33    }
34    &__right {
35      width: 32vw;
36      padding: 2rem 3rem;
37    }
38    &__contact {
39      width: 100%;
40    }
41  }
42}
43
44li{
45  list-style-type:none;
46}

jQuery
1$(function () {
2  $("#js_subImg img").on("click", function () {
3    img = $(this).attr("src");
4    $("#js_subImg li").removeClass("current");
5    $(this).parent().addClass("current");
6    $("#js_mainImg img").fadeOut(500, function () {
7      $("#js_mainImg img")
8        .attr("src", img)
9        .on("load", function () {
10          $(this).fadeIn(500);
11        });
12    });
13  });
14});

発生している問題

サムネイルをクリックして、メイン画像が切り替わる時に、一瞬表示が崩れてしまう。
（メイン画像以外の部分が上にずれてしまう）

試したこと

・当初、メイン画像のimgタグ内に、widthとheightの記述がなかったので、それらを追記するが、解決せず。

hatena19

2021/10/30 00:06 編集

コードブロックの記述法ですが、現状は、 ``` html <div class="workDetail__media__wrapper"> 以下略 ``` というようにしていると思いますが、 ```html <div class="workDetail__media__wrapper"> 以下略 ``` というように修正してください。回答者が動作確認でサンプルを作るとき手間が省けますので。

kumory

2021/10/30 09:16

この度はお手間をおかけして申し訳ありませんでした。ご指導いただきありがとうございました。

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

回答1件

ベストアンサー

fadeOut は透明度(opacity)を下げて、最後にはDisplay: Noneにしますので、レイアウトが崩れます。
fadeToを使ってください。これは透明度だけを変更します。

js
1$(function () {
2  $("#js_subImg img").on("click", function () {
3    img = $(this).attr("src");
4    $("#js_subImg li").removeClass("current");
5    $(this).parent().addClass("current");
6    $("#js_mainImg img").fadeTo(500, 0, function () {
7      $("#js_mainImg img")
8        .attr("src", img)
9        .on("load", function () {
10          $(this).fadeTo(500, 1);
11        });
12    });
13  });
14});
15