ギャラリー Web サイトのナビゲーションを備えた複数のモーダルの作成

解決策 1: 矢印を使用した基本的な HTML、CSS、および JavaScript モーダル

このソリューションでは、ナビゲーション モーダルに HTML、CSS、およびバニラ JavaScript を使用したフロントエンドのみのアプローチを示します。

// HTML structure for each modal
<div class="modal" id="modal1">
  <span class="close" onclick="closeModal()">&times;</span>
  <img class="modal-content" id="img01">
  <div class="caption"></div>
  <div class="nav left" onclick="prevImage()">❮</div>
  <div class="nav right" onclick="nextImage()">❯</div>
</div>
// JavaScript to handle modal behavior
let currentImage = 0;
const images = document.querySelectorAll('.galleryimg');
const modal = document.getElementById('modal1');
const modalImg = document.getElementById('img01');
images.forEach((img, index) => {
  img.onclick = () => {
    openModal(index);
  };
});
function openModal(index) {
  currentImage = index;
  modal.style.display = "block";
  modalImg.src = images[index].src;
}
function closeModal() {
  modal.style.display = "none";
}
function nextImage() {
  currentImage = (currentImage + 1) % images.length;
  modalImg.src = images[currentImage].src;
}
function prevImage() {
  currentImage = (currentImage - 1 + images.length) % images.length;
  modalImg.src = images[currentImage].src;
}
// CSS for modal styling
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
}
.nav {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

解決策 2: イベント委任を使用したモジュラー JavaScript アプローチ

このアプローチでは、モジュール式 JavaScript 関数を使用して、スケーラビリティと保守性を向上させます。

// Modular JavaScript setup for gallery modal
class GalleryModal {
  constructor(images) {
    this.images = images;
    this.currentImage = 0;
    this.modal = document.querySelector('.modal');
    this.modalImg = this.modal.querySelector('.modal-content');
    this.attachEventListeners();
  }
  attachEventListeners() {
    this.images.forEach((img, index) => {
      img.addEventListener('click', () => this.open(index));
    });
    this.modal.querySelector('.left').addEventListener('click', () => this.prev());
    this.modal.querySelector('.right').addEventListener('click', () => this.next());
  }
  open(index) {
    this.currentImage = index;
    this.modal.style.display = 'block';
    this.modalImg.src = this.images[index].src;
  }
  next() {
    this.currentImage = (this.currentImage + 1) % this.images.length;
    this.modalImg.src = this.images[this.currentImage].src;
  }
  prev() {
    this.currentImage = (this.currentImage - 1 + this.images.length) % this.images.length;
    this.modalImg.src = this.images[this.currentImage].src;
  }
}
// Initialize the modal functionality
document.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('.galleryimg');
  new GalleryModal(images);
});
// Additional CSS Styling
.modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

JavaScript を使用したモーダルの実装に関するよくある質問

1. JavaScript を使用してモーダルをトリガーするにはどうすればよいですか?
2. 使用できます addEventListener('click') 画像をクリックするとモーダルが開きます。
3. キーボードを使用してモーダルを閉じるにはどうすればよいですか?
4. 聞いてください keydown イベントを実行して、 key === 'Escape' をクリックしてモーダルを閉じます。
5. 次および前の画像ナビゲーションを実装する最も簡単な方法は何ですか?
6. 使用 modulus (%) リストの最後に到達せずに画像を循環します。
7. モーダルがモバイル デバイスで動作することを確認するにはどうすればよいですか?
8. 使用 media queries CSS を使用して、さまざまな画面サイズでデザインをテストします。
9. 遅延読み込みとは何ですか?どうすれば実装できますか?
10. 追加 loading="lazy" あなたへ img タグを使用して、画像がビューポートに表示されるまで画像の読み込みを延期します。

最終的な考えをまとめる

関数の実装 モーダル ギャラリー内の機能は、ユーザー インタラクションを向上させるために非常に重要です。矢印ベースのナビゲーションやキーボード サポートなどの機能を追加すると、ギャラリーがユーザー フレンドリーになり、複数のデバイスでアクセスできるようになります。これらの要素により、ユーザーは画像を効率的に閲覧できるようになります。

ギャラリーのパフォーマンスを維持するには、遅延読み込みなどの最適化手法を使用する必要があります。うまく構成された組み合わせ JavaScript そして CSS スムーズな移行と魅力的なエクスペリエンスを可能にします。ベスト プラクティスに従うことで、ギャラリーの応答性が高く、アクセスしやすく、将来の更新で簡単に拡張できるようになります。