[javascript] PhotoSwipe를 이용한 이미지 유려한 장면 전환 방법

22 Nov 2023

javascript

이미지 갤러리나 사진 뷰어를 개발할 때, 사용자 경험을 개선하기 위해 이미지 전환 효과를 부여하는 것이 중요합니다. PhotoSwipe는 웹 기반의 터치-지원 이미지 갤러리 라이브러리로, 이미지 간의 유려한 전환 효과를 제공합니다. 이번 글에서는 PhotoSwipe를 이용하여 이미지 간 전환을 구현하는 방법을 알아보겠습니다.

1. PhotoSwipe 라이브러리 가져오기

먼저, PhotoSwipe 라이브러리를 다운로드하고 웹 페이지에 연결해야 합니다. 다음 링크를 통해 최신 버전의 PhotoSwipe를 다운로드할 수 있습니다.

PhotoSwipe 다운로드

다운로드한 파일에서 photoswipe.js와 photoswipe.css를 웹 페이지에 연결합니다. 다음과 같이 <script>와 <link> 태그를 사용하여 라이브러리를 가져옵니다.

<head>
  ...
  <link rel="stylesheet" href="path/to/photoswipe.css">
  <script src="path/to/photoswipe.js"></script>
  ...
</head>

2. 이미지 요소 준비하기

이미지를 클릭하면 PhotoSwipe를 통해 전체 크기의 이미지를 보여주기 위해, 각 이미지에 대한 요소를 준비해야 합니다. figure 요소와 img 요소를 사용하여 이미지를 표시할 준비를 합니다.

<figure>
  <img src="path/to/image1.jpg" alt="Image 1" />
  <figcaption>Caption 1</figcaption>
</figure>

<figure>
  <img src="path/to/image2.jpg" alt="Image 2" />
  <figcaption>Caption 2</figcaption>
</figure>

<!-- 추가 이미지들 -->

3. PhotoSwipe 초기화하기

이제 PhotoSwipe를 초기화하여 이미지를 클릭하면 전체 크기의 이미지를 보여줄 준비를 합니다. JavaScript 코드 안에서 init 메소드를 호출하여 PhotoSwipe를 초기화합니다. 아래의 예시 코드를 참고하십시오.

var gallery = new PhotoSwipe( document.querySelector('.pswp'), PhotoSwipeUI_Default, images, options);
gallery.init();

위 코드에서 images는 이미지 객체의 배열이며, 각 객체에는 이미지의 URL, 폭, 높이, 캡션 등의 정보가 포함되어야 합니다. options는 PhotoSwipe에 대한 설정을 담고 있는 객체입니다. 자세한 설정 옵션은 PhotoSwipe 문서를 참고하십시오.

4. 전체 코드

아래의 코드는 PhotoSwipe를 통해 이미지 전환 효과를 구현하는 예시 코드입니다. 자세한 내용은 주석을 참고하십시오.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PhotoSwipe Example</title>
  <link rel="stylesheet" href="path/to/photoswipe.css">
  <script src="path/to/photoswipe.js"></script>
</head>
<body>
  <figure>
    <img src="path/to/image1.jpg" alt="Image 1" />
    <figcaption>Caption 1</figcaption>
  </figure>

  <figure>
    <img src="path/to/image2.jpg" alt="Image 2" />
    <figcaption>Caption 2</figcaption>
  </figure>

  <script>
    // 이미지 객체 배열
    var images = [
      { src: 'path/to/image1.jpg', w: 1200, h: 800, title: 'Image 1' },
      { src: 'path/to/image2.jpg', w: 800, h: 1200, title: 'Image 2' },
    ];

    // PhotoSwipe 초기화
    var options = {};
    var gallery = new PhotoSwipe( document.querySelector('.pswp'), PhotoSwipeUI_Default, images, options);
    gallery.init();
  </script>
</body>
</html>

위의 코드를 웹 페이지에 추가하고, 해당 이미지 파일들을 적절한 경로로 수정한 후 웹 페이지를 실행하면 PhotoSwipe를 통해 이미지 전환 효과를 확인할 수 있습니다.

PhotoSwipe 문서 및 예제 코드를 통해 자세한 사용법을 확인하실 수 있습니다. PhotoSwipe를 활용하여 웹 페이지에 유려한 이미지 전환 효과를 구현해보세요!