갤러리 웹사이트 탐색을 통해 여러 모달 생성

해결 방법 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 뷰포트에 표시될 때까지 이미지 로드를 연기하는 태그입니다.

최종 생각으로 마무리

기능적 구현 모달 갤러리는 사용자 상호작용을 개선하는 데 매우 중요합니다. 화살표 기반 탐색 및 키보드 지원과 같은 기능을 추가하면 갤러리가 사용자 친화적이고 여러 장치에서 액세스할 수 있습니다. 이러한 요소를 통해 사용자는 이미지를 효율적으로 탐색할 수 있습니다.

갤러리의 성능을 유지하려면 지연 로딩과 같은 최적화 기술을 사용해야 합니다. 잘 구성된 조합 자바스크립트 그리고 CSS 원활한 전환과 매력적인 경험을 제공합니다. 모범 사례를 따르면 갤러리가 응답성이 뛰어나고 액세스 가능하며 향후 업데이트로 쉽게 확장할 수 있습니다.