[javascript] PhotoSwipe와 연동하여 이미지 터치 이동 효과 추가하기

22 Nov 2023

javascript

이번 포스트에서는 PhotoSwipe JavaScript 라이브러리를 사용하여 이미지 터치 이동 효과를 추가하는 방법에 대해 알아보겠습니다.

1. PhotoSwipe 소개

PhotoSwipe은 모바일 및 데스크톱에서 사용할 수 있는 이미지 및 동영상 뷰어입니다. 사용자가 이미지를 확대, 축소하고, 드래그하여 움직일 수 있는 인터랙티브한 사용자 경험을 제공합니다.

PhotoSwipe은 심플하고 사용하기 쉽고, 다양한 커스터마이징 옵션을 제공하여 다양한 요구사항에 맞게 적용할 수 있습니다.

2. PhotoSwipe 설치 및 설정

먼저, PhotoSwipe을 설치하고 설정해야 합니다. 다음과 같이 HTML 파일에 PhotoSwipe 라이브러리의 CSS와 JavaScript 파일을 추가합니다:

<!DOCTYPE html>
<html lang="ko">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="path/to/photoswipe.css">
   <link rel="stylesheet" href="path/to/default-skin/default-skin.css">
</head>
<body>
   ...

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

PhotoSwipe 사용을 위해 마크업 구조를 준비해야 합니다. 일반적으로 <div> 태그를 사용하여 이미지를 감싸고, <img> 태그를 사용하여 이미지를 표시합니다.

<div class="my-gallery">
   <figure>
      <a href="path/to/large/image.jpg" data-size="800x600">
         <img src="path/to/small/image.jpg" alt="Image Title">
      </a>
   </figure>
</div>

3. 터치 이동 효과 추가하기

이제 PhotoSwipe을 사용하여 이미지 터치 이동 효과를 추가해 보겠습니다.

var pswpElement = document.querySelectorAll('.my-gallery');
var items = [
   {
      src: 'path/to/large/image.jpg',
      w: 800,
      h: 600
   }
   // 다른 이미지 아이템들 추가 가능
];

var options = {
   index: 0, // 초기 이미지 인덱스
   bgOpacity: 0.85, // 백그라운드 투명도 설정
   showHideOpacity: true, // 이미지 나타내고 사라질 때 투명도 설정
   captionEl: false, // 캡션  엘리먼트 비활성화
   tapToClose: true, // 이미지 터치하면 닫는 옵션
   tapToToggleControls: false // 이미지 터치하면 제어바 보여주는 옵션
};

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

위 코드에서 pswpElement 변수는 .my-gallery 클래스를 갖는 HTML 엘리먼트들을 선택합니다. 사진 갤러리에 터치 기능을 추가하려면 이 클래스를 필요로 합니다.

items 배열에는 이미지 정보를 포함해야 합니다. 각 이미지는 src, w, h 속성을 가지고 있어야 합니다.

options 객체는 PhotoSwipe의 설정을 제어합니다. 투명도, 캡션, 이벤트 등 다양한 옵션을 설정할 수 있습니다.

마지막으로 new PhotoSwipe를 호출하여 터치 이동 효과를 포함한 이미지 갤러리를 초기화합니다.

4. 마무리

이제 PhotoSwipe와 연동하여 이미지 터치 이동 효과를 추가하는 방법을 알아보았습니다. PhotoSwipe을 사용하면 모바일 및 데스크톱에서 인터랙티브한 이미지 뷰어를 구현할 수 있습니다. 자세한 내용은 PhotoSwipe 공식 문서를 참조하세요.