PhotoSwipe는 오픈 소스 JavaScript 라이브러리로, 모바일 및 데스크톱에서 터치 이벤트를 지원하여 이미지 갤러리에 확대 및 축소 기능을 추가할 수 있습니다. 이번 글에서는 PhotoSwipe를 사용하여 이미지를 확대 및 축소하는 방법에 대해 알아보겠습니다.

PhotoSwipe 설치

PhotoSwipe는 npm을 통해 설치할 수 있습니다. 다음 명령을 사용하여 PhotoSwipe를 프로젝트에 추가합니다.

npm install photoswipe

PhotoSwipe 초기화

먼저, HTML 파일에 PhotoSwipe의 스타일시트와 스크립트를 포함시켜야 합니다. 다음과 같이 link와 script 태그를 추가합니다.

<link rel="stylesheet" href="path/to/photoswipe.css">
<link rel="stylesheet" href="path/to/default-skin/default-skin.css">

<script src="path/to/photoswipe.min.js"></script>
<script src="path/to/photoswipe-ui-default.min.js"></script>

다음으로, JavaScript 파일에서 다음 코드를 사용하여 PhotoSwipe를 초기화합니다.

const pswpElement = document.querySelectorAll('.pswp')[0];

// 이미지를 클릭했을 때 PhotoSwipe 초기화
const openPhotoSwipe = () => {
  const items = [
    {
      src: 'image1.jpg',
      w: 800,
      h: 600
    },
    {
      src: 'image2.jpg',
      w: 1200,
      h: 900
    },
    {
      src: 'image3.jpg',
      w: 1600,
      h: 1200
    }
  ];

  const options = {
    index: 0
  };

  const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
  gallery.init();
}

document.querySelectorAll('.image').forEach((image) => {
  image.addEventListener('click', openPhotoSwipe);
});

위 코드에서 openPhotoSwipe 함수는 이미지를 클릭했을 때 PhotoSwipe를 초기화하는 역할을 합니다. items 배열에는 확대 및 축소할 이미지의 정보가 들어있으며, options 객체에는 초기 화면에 보여질 이미지의 인덱스를 지정할 수 있습니다.

사용자 인터페이스 커스터마이징

PhotoSwipe는 다양한 사용자 인터페이스 커스터마이징 옵션을 제공합니다. 예를 들어, 화면 좌측 상단에 이미지 순번을 표시하거나, 화면 우측 상단에 닫기 버튼을 추가할 수 있습니다. 자세한 내용은 PhotoSwipe 문서를 참조하십시오.

결론

이상으로, PhotoSwipe를 사용하여 이미지 확대 및 축소 기능을 구현하는 방법을 알아보았습니다. PhotoSwipe는 사용하기 쉽고 다양한 커스터마이징 옵션을 제공하여 다양한 이미지 갤러리에 적용할 수 있습니다. 자세한 내용은 PhotoSwipe 문서를 참조하시기 바랍니다.

참고 자료

• PhotoSwipe 공식 홈페이지: https://photoswipe.com/
• PhotoSwipe GitHub 저장소: https://github.com/dimsemenov/PhotoSwipe