이미지 갤러리는 웹 사이트 또는 앱에서 이미지를 보여주는 매우 일반적인 기능입니다. 이번에는 PhotoSwipe라는 JavaScript 라이브러리를 사용하여 이미지 갤러리를 구현하는 방법에 대해 알아보겠습니다.

PhotoSwipe 라이브러리란?

PhotoSwipe는 사용자가 화면에서 이미지를 확대하거나 확대 된 이미지를 스와이프하여 다른 이미지로 전환할 수 있는 기능을 제공하는 간단하고 유연한 JavaScript 라이브러리입니다. 이 라이브러리는 모바일에서도 잘 작동하며, 반응형 웹 디자인에도 적합합니다.

PhotoSwipe 설치

PhotoSwipe를 사용하려면 먼저 해당 라이브러리를 다운로드하고 HTML 문서에 포함해야 합니다. 다음은 CDN을 통해 PhotoSwipe 라이브러리를 가져오는 예시입니다.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>

HTML 구조 설정

이미지 갤러리를 만들기 위해 HTML 구조를 설정해야 합니다. 일반적으로 <div> 요소를 사용하여 이미지 갤러리를 감싸고, <a> 태그와 <img> 태그를 사용하여 이미지 요소를 만듭니다. 다음은 이미지 갤러리 구조의 예시입니다.

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
  <a href="path/to/image1.jpg" itemprop="contentUrl" data-size="1200x800">
    <img src="path/to/image1.jpg" itemprop="thumbnail" alt="Image 1" />
  </a>
  <a href="path/to/image2.jpg" itemprop="contentUrl" data-size="1200x800">
    <img src="path/to/image2.jpg" itemprop="thumbnail" alt="Image 2" />
  </a>
  <!-- 추가 이미지 요소들 -->
</div>

JavaScript 코드 작성

이제 JavaScript 코드를 작성하여 PhotoSwipe를 초기화하고 이미지 갤러리에 적용해야 합니다. 다음은 초기화 및 적용을 위한 JavaScript 코드의 예시입니다.

var gallery = new PhotoSwipe('.my-gallery', PhotoSwipeUI_Default);

// 이미지를 클릭하면 갤러리를 열도록 이벤트 리스너를 추가합니다.
var galleryElements = document.querySelectorAll('.my-gallery a');
for (var i = 0, len = galleryElements.length; i < len; i++) {
  galleryElements[i].addEventListener('click', function(e) {
    e.preventDefault();
    gallery.init();
  });
}

실행 결과

위의 코드를 적용하면 이미지를 클릭했을 때 PhotoSwipe 갤러리가 열리는 것을 확인할 수 있습니다. 갤러리의 확대/축소, 스와이프 등의 기능을 사용하여 이미지 갤러리를 자유롭게 탐색할 수 있습니다.

이렇게 PhotoSwipe를 사용하여 이미지 갤러리를 구현할 수 있습니다. PhotoSwipe의 자세한 사용법과 추가적인 설정에 대해서는 공식 문서를 참고하시기 바랍니다.

PhotoSwipe 공식 문서: https://photoswipe.com/