PhotoSwipe는 모바일 및 데스크톱 장치에서 사용할 수 있는 JavaScript 기반의 이미지 갤러리 및 라이트박스 라이브러리입니다. 이를 사용하여 이미지 그리드 레이아웃을 구현하는 방법을 알아보겠습니다.

1. PhotoSwipe 라이브러리 설치

먼저, PhotoSwipe 라이브러리를 다운로드하고 프로젝트에 포함시켜야 합니다. 다음 명령을 사용하여 NPM을 통해 설치할 수 있습니다.

npm install photoswipe

또는, CDN을 사용하여 다음과 같이 라이브러리를 가져올 수도 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/default-skin/default-skin.min.css">

2. HTML 구조 작성

이미지 그리드를 나타낼 HTML 구조를 작성해야 합니다. 다음과 같이 <div> 요소를 사용하여 이미지를 감싸는 컨테이너를 생성합니다.

<div id="image-grid">
  <div class="grid-item">
    <a href="image1.jpg">
      <img src="thumbnail1.jpg" alt="Image 1">
    </a>
  </div>
  <div class="grid-item">
    <a href="image2.jpg">
      <img src="thumbnail2.jpg" alt="Image 2">
    </a>
  </div>
  <!-- 추가 이미지들 -->
</div>

3. JavaScript 코드 작성

이미지 그리드를 작동시키기 위해 JavaScript 코드를 작성해야 합니다. 다음과 같이 코드를 작성하고 페이지 로드 시에 실행되도록 해야 합니다.

window.addEventListener('DOMContentLoaded', function() {
  // 이미지 그리드 요소 가져오기
  var grid = document.querySelector('#image-grid');
  
  // 이미지 그리드 아이템 가져오기
  var items = grid.querySelectorAll('.grid-item');
  
  // PhotoSwipe 라이브러리 초기화
  var gallery = new PhotoSwipe(document.querySelector('.pswp'), PhotoSwipeUI_Default, items, { });
  
  // 이미지 그리드 아이템을 클릭했을 때 이미지 갤러리 열기
  grid.addEventListener('click', function(event) {
    event.preventDefault();
    gallery.open();
  });
});

4. 스타일링

마지막으로, 이미지 그리드와 이미지들의 스타일을 지정하여 원하는 디자인을 만들 수 있습니다. CSS를 사용하여 스타일링 조정을 할 수 있습니다.

#image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item img {
  width: 100%;
  height: auto;
}

위의 코드는 단순한 예제일 뿐입니다. 필요에 따라 더 많은 이미지 그리드 아이템을 추가하고, 스타일링을 변경하거나 PhotoSwipe의 옵션을 사용하여 원하는 동작을 구현할 수 있습니다.

PhotoSwipe에 대한 자세한 정보는 공식 문서를 참조하세요.