Colin's Blog
[javascript] PhotoSwipe를 이용한 이미지 핀치 줌 기능 구현 방법

이미지 핀치 줌(pinch zoom) 기능은 사용자가 이미지를 확대 또는 축소할 수 있도록 제공하는 매우 유용한 기능입니다. PhotoSwipe는 자바스크립트 라이브러리로, 이미지 핀치 줌 기능을 쉽게 구현할 수 있도록 도와줍니다.

1. PhotoSwipe 라이브러리 설치

PhotoSwipe 라이브러리를 사용하기 위해 먼저 해당 라이브러리를 다운로드하거나 CDN 링크를 통해 가져와야 합니다. 다음은 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>

2. HTML 구조 설정

이미지 핀치 줌 기능을 적용할 HTML 구조를 설정해야 합니다. 일반적으로 이미지들을 감싸는 .pswp 클래스의 div 요소를 포함한 구조를 사용합니다.

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <!-- 이미지를 보여줄 공간 -->
  <div class="pswp__zoom-wrap">
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    <div class="pswp__ui pswp__ui--hidden">
      <!-- 이미지 정보 및 컨트롤러를 보여줄 영역 -->
    </div>
  </div>
</div>

<!-- 이미지를 클릭했을 때 보여줄 썸네일 이미지 -->
<div class="thumbnail" onclick="openPhotoSwipe()">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

3. 자바스크립트 코드 작성

PhotoSwipe를 초기화하고 이미지 핀치 줌 기능을 사용하기 위한 자바스크립트 코드를 작성해야 합니다.

function openPhotoSwipe() {
  var pswpElement = document.querySelectorAll('.pswp')[0];

  // 이미지 핀치 줌 기능을 적용할 이미지의 정보를 배열로 정의합니다.
  var items = [
    {
      src: 'image1.jpg',
      w: 1200,
      h: 800
    },
    {
      src: 'image2.jpg',
      w: 1000,
      h: 700
    },
    {
      src: 'image3.jpg',
      w: 800,
      h: 600
    }
  ];

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

위의 코드에서 openPhotoSwipe 함수는 이미지를 클릭했을 때 PhotoSwipe를 초기화하여 이미지 핀치 줌 기능을 보여주는 역할을 합니다. items 배열에는 핀치 줌 기능을 적용할 이미지의 정보를 정의하며, src, w, h 속성은 이미지의 경로, 너비, 높이를 나타냅니다.

4. CSS 스타일링

마지막으로 CSS 스타일링을 통해 PhotoSwipe를 원하는 레이아웃에 맞게 스타일을 변경할 수 있습니다.

.pswp__item {
  width: 100% !important;
  height: auto !important;
}

.thumbnail {
  display: flex;
  justify-content: center;
}

.thumbnail img {
  width: 100px;
  height: 100px;
  margin: 10px;
  cursor: pointer;
}

pswp__item 클래스를 통해 이미지의 크기를 조정하거나, thumbnail 클래스를 통해 썸네일 이미지의 스타일을 변경할 수 있습니다.

PhotoSwipe를 사용하여 이미지 핀치 줌 기능을 구현하는 방법에 대해 알아보았습니다. PhotoSwipe를 활용하여 사용자 친화적인 이미지 뷰어를 제공하고, 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

참고 자료

© 2018 Colin. All rights reserved.