CodePen Embed - 2020-06-20-sample07

<div class="flex-box">
  <div class="thumnail-left-box">
    <img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A0">
  </div>
  <ul class="thumnail-right-box flex-box">
    <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A0"></li>
    <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A1"></li>
    <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A2"></li>
    <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A3"></li>
    <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A4"></li>
    <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A5"></li>
    <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A6"></li>
    <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A7"></li>
    <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A8"></li>
    <li><img src="https://placehold.jp/24/cdcdcd/ffffff/50x50.png?text=%E2%91%A9"></li>
  </ul>
</div>

.flex-box {
  display: flex;
  flex-wrap: wrap;
}

.flex-box img {
  vertical-align: top;
}

.thumnail-left-box {
  width: 70%;
  margin: 0;
  padding: 0 0 2.5%;
}

.thumnail-left-box img {
  width: 100%;
}

.thumnail-right-box {
  width: 30%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thumnail-right-box li {
  display: flex;
  flex-wrap: wrap;
  width: 40%;
  margin: 0 0 0 auto;
}

.thumnail-right-box li img {
  width: 100%;
  margin: 0 0 auto;
}

$(document).ready(function(){
  $("img").imagesLoaded(function () {
    $(".thumnail-right-box img").on("click", function () {
      var img_src = $(this).attr("src");
      $(".thumnail-left-box img").attr("src", img_src);
    });
  });
});

This Pen is owned by YOHEI INAI on CodePen.

See more by @yohei_inai on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript