[javascript] PhotoSwipe 썸네일 기능 활용 방법

22 Nov 2023

javascript

PhotoSwipe는 모바일 및 데스크톱에서 이미지 및 갤러리를 제공하는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 이미지 갤러리를 만들 때 썸네일 기능을 활용할 수 있습니다. 이번 포스트에서는 PhotoSwipe 라이브러리의 썸네일 기능을 활용하는 방법에 대해 알아보겠습니다.

PhotoSwipe 라이브러리 설치

먼저 PhotoSwipe 라이브러리를 설치해야 합니다. 라이브러리를 설치하기 위해서는 아래의 명령을 실행하세요.

npm install photoswipe

HTML 구조

이미지 갤러리를 위한 HTML 구조를 작성해야 합니다. 다음은 간단한 예시입니다.

<div id="gallery">
  <a href="/path/to/image1.jpg">
    <img src="/path/to/thumbnail1.jpg" alt="Image 1">
  </a>
  <a href="/path/to/image2.jpg">
    <img src="/path/to/thumbnail2.jpg" alt="Image 2">
  </a>
  <a href="/path/to/image3.jpg">
    <img src="/path/to/thumbnail3.jpg" alt="Image 3">
  </a>
</div>

<a> 요소 안에서 이미지의 원본 경로와 썸네일 이미지의 경로를 지정해야 합니다.

자바스크립트 설정

이제 자바스크립트를 사용하여 썸네일 기능을 활용할 수 있도록 설정해야 합니다. 다음은 설정 방법의 예시입니다.

import PhotoSwipe from 'photoswipe';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';

const gallery = document.getElementById('gallery');
const galleryItems = [];

// 이미지 갤러리 아이템 가져오기
Array.from(gallery.children).forEach((link) => {
  const item = {
    src: link.getAttribute('href'),
    w: 800,
    h: 600,
  };

  galleryItems.push(item);
});

// 썸네일 클릭 시 이벤트 핸들러 설정
gallery.addEventListener('click', (event) => {
  event.preventDefault();

  const index = Array.from(gallery.children).indexOf(event.target.parentNode);
  const options = {
    index,
    bgOpacity: 0.7,
    showHideOpacity: true,
  };

  const photoswipe = new PhotoSwipe(
    document.getElementById('pswp'),
    PhotoSwipeUI_Default,
    galleryItems,
    options,
  );

  photoswipe.init();
});

위의 예시 코드를 동작하는 프로젝트에 적용하면, 썸네일을 클릭하면 큰 이미지가 나타나는 갤러리를 만들 수 있습니다.

결론

이렇게 PhotoSwipe 라이브러리를 사용하여 썸네일 기능을 활용한 이미지 갤러리를 만들 수 있습니다. PhotoSwipe는 다양한 옵션을 제공하므로 필요에 맞게 설정하여 사용할 수 있습니다. 추가적인 정보나 기능에 대해서는 PhotoSwipe 공식 문서를 참고하세요.

참고 문서: