クリックすると拡大される(Javascriptを使用)

画面録画 2025-01-06 110312.mp4

画像をクリックすると画像が拡大表示され、背景が黒っぽく表示される。 画像ではない場所をクリックすると拡大表示が終了する。

HTMLで拡大表示用の枠を作る

    <!-- モーダルによる拡大画像の表示 -->
    <div class="menu-modal">
      <img src="" alt="" class="menu-bigimg" />
    </div>

中身は存在しない空要素として作っておく。 画像が拡大されたときに表示される枠の役割を果たす。

クリックすると拡大したい画像を<div>で囲みクラスを付与

    <div class="content-img">
      <a href="">
        <img src="images/1022_cut.png" alt="丸く切り抜いたペンギンの写真" />
      </a>
    </div>

クリックさせたいところが複数箇所あるのでクラス名を使う。 id名はページにつき1箇所の制限があるため。

    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js>"></script>
    <script src="js/script.js"></script>

jQueryへのリンクとjsファイルの読み込みを指定する。場所は終了の</body>タグの上。

CSSの記述

クリックしたあとの拡大表示時のレイアウトをCSSで指定する。

/* モーダルで画像の拡大表示
----------------------------------- */
.menu-modal {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
}

.menu-bigimg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 60%;
  max-height: 70%;
  margin: auto;
  display: block;
}

「background-color: rgba(0, 0, 0, 0.8);」は画像ではない背景の色を指定している。 ポジションを「0」に設定して「margin: auto;」を指定すると画像が画面中央に表示される。

「max-width」「max-height」で画像の表示倍率を指定している。数値を大きくすると拡大されたときの画像がより大きく表示される。