画像をクリックすると画面いっぱいにポップアップ表示する処理

×

document.addEventListener('DOMContentLoaded', () => {
  const popup = document.getElementById('popup');
  const closeBtn = document.getElementById('closeBtn');
  const popupImage = document.getElementById('popupImage');
  const thumbnails = document.querySelectorAll('.thumbnail'); // 全てのサムネイル画像を取得

  // サムネイル画像をループしてイベントリスナーを追加
  thumbnails.forEach((thumbnail) => {
    thumbnail.addEventListener('click', () => {

      let imgSrc = thumbnail.getAttribute('src'); // サムネイル画像のsrcを取得
  
      // サムネイル画像のパスが相対パスの場合、絶対URLに変換
      if (!imgSrc.startsWith('http')) {
        imgSrc = `${window.location.origin}/kopipesityainayo${imgSrc}`;
      }

      // 一時的な画像オブジェクトで縦横比を取得
      const tempImage = new Image();
      tempImage.onload = () => {
        const aspectRatio = tempImage.width / tempImage.height;

        // ポップアップ画像のスタイルを縦横比に応じて調整
        if (aspectRatio > 1) {
          // 横長の場合
          popupImage.style.width = '100%';
          popupImage.style.height = 'auto';
        } else {
          // 縦長の場合
          popupImage.style.width = 'auto';
          popupImage.style.height = '80%';
        }

        popupImage.setAttribute('src', imgSrc); // ポップアップ画像に設定
        popup.classList.add('show');
        document.body.classList.add('popup-active'); // スクロール無効化
      };

      tempImage.src = imgSrc; // 画像ロード開始
    });
  });

  // ポップアップを閉じる共通処理
  const closePopup = () => {
    popup.classList.remove('show');
    document.body.classList.remove('popup-active'); // スクロール有効化
  };

  // ×ボタンクリックでポップアップ非表示
  closeBtn.addEventListener('click', closePopup);

  // ポップアップ背景クリックで非表示
  popup.addEventListener('click', (e) => {
    if (e.target === popup || e.target === popupImage) {
      closePopup();
    }
  });

  // ポップアップ画像クリックで非表示
  popupImage.addEventListener('click', closePopup);
});

<div class="gallery">
<img src="/wp-content/uploads/2025/01/yuu0024-009.jpg" alt="夕日" width="2000" height="1333" class="aligncenter size-full wp-image-474 thumbnail" />
<img src="/wp-content/uploads/2025/01/射的の屋台（日中）.jpg" alt="射的の屋台" width="1920" height="1080" class="aligncenter size-full wp-image-538 thumbnail" />
</div>

<div class="popup" id="popup">
<div class="popup-content">
<img src="" alt="拡大画像" class="popup-image" id="popupImage">
<button class="close-btn" id="closeBtn">×</button>
</div>
</div>

.gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.thumbnail-content-col2 {
  width: calc(100% / 2 - 2%);
  height: auto;
}

.thumbnail {
  cursor: pointer;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup.show {
  display: flex;
  animation: fadeIn 0.5s ease-out;
}

.popup-content {
  position: relative;
  animation: scaleIn 0.5s ease-out;
}

.popup-image {
  width: 90vw;
  height: auto;
  max-height: 90vh;
  display: block;
  border-radius: 8px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.6);
  border: none;
  border-radius: 25%;
  width: 32px;
  height: 32px;
  font-size: 20px;
  color: #333;
  cursor: pointer;
  transition: background 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.8)
}

body.popup-active {
  overflow: hidden;
}

@keyframes fadeIn {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.8);
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

<div class="splide" role="group" aria-label="Splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="/wp-content/uploads/2025/01/射的の屋台（日中）.jpg" alt="射的の屋台" width="1920" height="1080" class="aligncenter size-full wp-image-538 thumbnail" /></li>
<li class="splide__slide"><img src="/wp-content/uploads/2024/12/文化系の部室（日中）.jpg" alt="文化系の部室" width="1920" height="1080" class="aligncenter size-full wp-image-546 thumbnail" /></li>
<li class="splide__slide"><img src="/wp-content/uploads/2024/12/一人部屋２（日中）.jpg" alt="一人部屋２" width="1920" height="1080" class="aligncenter size-full wp-image-547 thumbnail" /></li>
<li class="splide__slide"><img src="/wp-content/uploads/2024/12/パソコン部屋２（日中）.jpg" alt="パソコン部屋２" width="1920" height="1080" class="aligncenter size-full wp-image-548 thumbnail" /></li>
</ul>
</div>
</div>