クリックしたら画面が変わるjQuery ビューワー

サムネイルを押すとその画像が拡大されて表示される。

実際に動くURLはこちら

使用したjQuery

• click();
• attr();

jQuery のコード

$function(){
 $('.viewer03__item').click(function () {
 $('.viewer03__MainView').attr("src", $(this).attr("href"));
 return false;
})

HTMLのコード

<div class="showBoard viewer03">
  <h2 class="viewer03__header">いちごまつり</h2>
  <div class="viewer03__body">
    <img class="viewer03__MainView" src="img/berrycake_1.jpg" alt="苺のケーキ1">
    <ul class="viewer03__items">
      <li>
        <a class="viewer03__item" href="img/berrycake_1.jpg">
          <img src="img/thumb_berrycake_1.jpg" alt="thumnail 苺のケーキ1">
        </a>
      </li>
      <li>
        <a class="viewer03__item" href="img/berrycake_2.jpg">
          <img src="img/thumb_berrycake_2.jpg" alt="thumnail 苺のケーキ2">
        </a>
      </li>
      <li>
        <a class="viewer03__item" href="img/berrycake_3.jpg">
          <img src="img/thumb_berrycake_3.jpg" alt="thumnail 苺のケーキ3">
        </a>
      </li>
    </ul>
  </div>
</div>

css コード

.viewer03 {
  width: 90%;
  background-color: variable.$bright5_color;

  &__header {
    padding: 10px 0;
    text-align: center;
    font-size: 1.5rem;
  }

  &__MainView {
    display: block;
    margin: 0 auto;
    width: 65%;
    aspect-ratio: 16/9;
    object-fit: cover;
  }

  &__items {
    margin: 0 auto;
    padding: 10px 0 15px;
    width: 40%;
    display: flex;
    gap: 20px;

  }
}

使用例

写真やイラストなどのギャラリービューに使われる