PhotoSwipe는 모바일 및 데스크톱에서 사용할 수 있는 이미지 갤러리 및 라이트박스 라이브러리입니다. 이 라이브러리를 이용하면 이미지를 확대, 축소, 이동할 수 있는 기능을 추가할 수 있습니다. 이번 블로그 포스트에서는 PhotoSwipe를 사용하여 이미지 위치 이동 기능을 구현하는 방법을 알아보겠습니다.

1. PhotoSwipe 설치 및 설정

PhotoSwipe를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. 다음과 같이 npm을 사용하여 설치할 수 있습니다.

npm install photoswipe

설치가 완료되면, PhotoSwipe의 스타일과 스크립트 파일을 HTML 파일에 추가해야 합니다. 다음과 같이 태그를 추가합니다.

<link rel="stylesheet" href="path/to/photoswipe.css">
<link rel="stylesheet" href="path/to/default-skin.css">
<script src="path/to/photoswipe.min.js"></script>
<script src="path/to/photoswipe-ui-default.min.js"></script>

2. HTML 마크업 준비하기

PhotoSwipe를 사용하여 이미지 위치 이동 기능을 구현하기 위해서는 이미지들을 마크업으로 작성해야 합니다. 다음과 같은 형태로 작성합니다.

<div class="my-gallery">
  <figure>
    <a href="path/to/image-1.jpg" data-size="800x600">
      <img src="path/to/thumb-1.jpg" alt="Image 1">
    </a>
    <figcaption>Image 1</figcaption>
  </figure>
  
  <figure>
    <a href="path/to/image-2.jpg" data-size="800x600">
      <img src="path/to/thumb-2.jpg" alt="Image 2">
    </a>
    <figcaption>Image 2</figcaption>
  </figure>
  
  <!-- 추가 이미지들 -->
</div>

위와 같이 이미지들을 figure 요소 안에 a 요소로 감싸고, href 속성에 이미지 파일 경로를 지정합니다. data-size 속성을 설정하여 이미지의 크기를 지정할 수도 있습니다.

3. JavaScript로 PhotoSwipe 초기화

마크업 작성이 완료되면, JavaScript를 사용하여 PhotoSwipe를 초기화해야 합니다. 다음과 같이 초기화 코드를 작성합니다.

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

위 코드에서 ‘.my-gallery’는 앞에서 작성한 HTML 마크업의 클래스를 나타냅니다. 라이브러리를 초기화한 후, init() 함수를 호출하여 PhotoSwipe를 실행할 준비를 합니다.

4. 이미지 위치 이동 기능 추가하기

이제 이미지 위치 이동 기능을 추가할 수 있습니다. PhotoSwipe는 기본적으로 이미지를 이동할 수 있도록 설정되어 있지만, 필요에 따라 이동 속도 등을 조정할 수 있습니다. 다음과 같은 코드를 사용하여 이동 속도를 조절할 수 있습니다.

gallery.options.pinchToClose = false; // 이미지 이동 비활성화
gallery.options.tapToToggleControls = false; // 탭 시 이미지 내 부가 기능 표시 비활성화

// 이미지 이동 속도 조절
gallery.options.getDoubleTapZoom = function(isMouseClick, item) {
  if (isMouseClick) {
    return 1;
  } else {
    return item.initialZoomLevel < 0.7 ? 1 : 1.5;
  }
}

위 코드에서는 pinchToClose 옵션을 false로 설정하여 이미지 이동 기능을 비활성화하고, tapToToggleControls 옵션을 false로 설정하여 탭 시 이미지 내의 부가 기능을 표시하지 않도록 합니다. 또한, getDoubleTapZoom 함수를 사용하여 이미지 이동 속도를 조절할 수 있습니다.

결론

이제 PhotoSwipe를 사용하여 이미지 위치 이동 기능을 구현하는 방법을 알아보았습니다. 앞서 설명한 방법을 따라 마크업을 작성하고, JavaScript를 사용하여 PhotoSwipe를 초기화하고 원하는 이미지 이동 기능을 설정할 수 있습니다. PhotoSwipe의 다양한 옵션과 기능을 활용하여 사용자에게 편리한 이미지 갤러리를 제공해보세요!

참고: PhotoSwipe 공식 문서