クリックで拡大する画像の実装方法

画像を大きくして表示したい時、画像をクリックしたら、大きな画像が表示されるシーンがよくあると思います。

javascriptを使わない方法
本番はこちら

javascriptを使わない方法

まず、一番簡単なやり方を紹介します。

<a href="image.jpg" target="_blank"><img src="image.jpg" width="200px"></a>

画像の横幅を200pxと指定することで、ページ上では、画像が小さく表示されます。

そして、画像をクリックすると、もともとのサイズの画像が新しいタブ（ウィンドウ）で表示されます。

でもこのやり方はシンプルすぎて、もとのタブに戻るのは面倒です。

本番はこちら

以下は、画像をクリックすると大きな画像が表示されるHTML/CSS/JavaScriptのコード例です。

<!-- 画像を表示するためのimg要素 -->
<img src="thumbnail.jpg" alt="サムネイル画像" class="thumbnail">

<!-- 大きな画像を表示するためのモーダル -->
<div id="modal">
  <div class="modal-content">
    <img src="fullsize.jpg" alt="フルサイズ画像" class="fullsize">
  </div>
</div>

/* モーダルのスタイル */
#modal {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8); /* 半透明の背景色 */
}

/* モーダルの内容部分のスタイル */
.modal-content {
  margin: auto;
  width: 80%;
  max-width: 800px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* サムネイル画像のスタイル */
.thumbnail {
  width: 200px;
  height: 150px;
  object-fit: cover; /* 画像をアスペクト比を保ちつつ縮小 */
  cursor: pointer;
}

/* フルサイズ画像のスタイル */
.fullsize {
  width: 100%;
  height: auto;
}

// サムネイル画像をクリックしたときの処理
const thumbnail = document.querySelector('.thumbnail');
const modal = document.querySelector('#modal');
const fullsize = document.querySelector('.fullsize');

thumbnail.addEventListener('click', () => {
  modal.style.display = 'block'; // モーダルを表示
  fullsize.src = 'fullsize.jpg'; // フルサイズ画像を読み込む
});

// モーダルを閉じる処理
modal.addEventListener('click', () => {
  modal.style.display = 'none'; // モーダルを非表示
});

このコード例では、サムネイル画像とフルサイズ画像はそれぞれthumbnail.jpgとfullsize.jpgというファイル名で、同じディレクトリに保存されているとします。

また、フルサイズ画像のアスペクト比は保たれるように、width: 100%; height: auto;というスタイルを指定しています。必要に応じて、サイズやスタイルを調整してください。