[javascript] PhotoSwipe 플러그인 활용 방법

22 Nov 2023

javascript

PhotoSwipe은 웹사이트나 모바일 앱에서 이미지 갤러리나 슬라이드쇼를 만들 때 사용되는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 사용자들이 이미지를 확대, 축소, 드래그 등의 동작으로 자유롭게 볼 수 있게 됩니다. 이번 글에서는 PhotoSwipe을 사용하는 방법에 대해 알아보겠습니다.

PhotoSwipe 라이브러리 가져오기

먼저, PhotoSwipe 라이브러리를 다운로드하거나 CDN을 이용하여 가져와야 합니다. 아래는 예시입니다.

<!DOCTYPE html>
<html>
<head>
  ...
  <!-- PhotoSwipe CSS 파일 -->
  <link rel="stylesheet" href="path/to/photoswipe.css"/>
  <link rel="stylesheet" href="path/to/default-skin/default-skin.css"/>
</head>
<body>
  <!-- 이미지 갤러리를 나타낼 요소 -->
  <div class="my-gallery">
    <!-- 이미지 리스트 -->
    <a href="path/to/image-1.jpg" data-size="width: 800px; height: 600px">
      <img src="path/to/thumbnail-1.jpg" alt=""/>
    </a>
    <a href="path/to/image-2.jpg" data-size="width: 1200px; height: 900px">
      <img src="path/to/thumbnail-2.jpg" alt=""/>
    </a>
    <!-- 추가 이미지 리스트 -->
    ...
  </div>

  <!-- PhotoSwipe 스크립트 파일 -->
  <script src="path/to/photoswipe.min.js"></script>
  <script src="path/to/photoswipe-ui-default.min.js"></script>

  <script>
    // PhotoSwipe 초기화 코드
  </script>
</body>
</html>

PhotoSwipe 초기화

PhotoSwipe을 사용하기 위해선 JavaScript를 사용하여 초기화하는 과정이 필요합니다. 아래는 초기화 예제입니다.

<script>
  // 이미지 클릭 시 PhotoSwipe을 열도록 설정
  document.querySelectorAll('.my-gallery a').forEach(function (element) {
    element.onclick = function (event) {
      event.preventDefault();

      var index = Array.prototype.indexOf.call(element.parentNode.children, element);

      var items = [];

      // 이미지 정보 추출
      document.querySelectorAll('.my-gallery a').forEach(function (element) {
        var item = {
          src: element.getAttribute('href'),
          w: parseInt(element.getAttribute('data-size').split(' ')[1]),
          h: parseInt(element.getAttribute('data-size').split(' ')[3])
        };

        items.push(item);
      });

      // PhotoSwipe 열기
      var options = {
        index: index,
        bgOpacity: 0.7,
        history: false
      };
      var gallery = new PhotoSwipe(document.querySelector('.pswp'), PhotoSwipeUI_Default, items, options);
      gallery.init();
    };
  });
</script>

위의 코드는 .my-gallery 클래스를 가진 요소 안의 이미지를 클릭하면 해당 이미지를 열도록 설정하는 코드입니다. 이외에도 각종 옵션을 설정하여 원하는 동작을 구현할 수 있습니다.

결론

이상으로 PhotoSwipe 플러그인의 활용 방법에 대해 알아보았습니다. PhotoSwipe을 사용하여 웹사이트나 모바일 앱에서 멋진 이미지 갤러리를 구현해보세요. 더 자세한 내용은 PhotoSwipe 공식 문서를 참고하시기 바랍니다.