PhotoSwipe은 모바일 및 데스크톱 장치에서 사용할 수 있는 JavaScript 기반의 갤러리 및 이미지 뷰어 라이브러리입니다. 이 라이브러리는 웹사이트나 앱에서 이미지를 표시하고 스와이프 및 확대/축소 기능을 제공하는 데 사용됩니다. 이번에는 PhotoSwipe를 사용하여 이미지 스파크라인 효과를 만들어보겠습니다.

PhotoSwipe 설치 및 설정

먼저, PhotoSwipe을 설치하고 설정해야 합니다. 다음 명령을 사용하여 PhotoSwipe을 설치합니다.

npm install photoswipe

설치가 완료되면, 다음과 같은 스크립트 태그를 HTML 파일에 추가하여 PhotoSwipe과 관련된 스타일과 스크립트 파일을 로드합니다.

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

이미지 스파크라인 효과 구현

이제 PhotoSwipe을 사용하여 이미지 스파크라인 효과를 구현해보겠습니다. 먼저, 이미지를 포함하는 HTML 요소를 생성합니다.

<div class="image-gallery">
  <figure>
    <a href="path/to/image1.jpg" data-size="800x600">
      <img src="path/to/thumbnail1.jpg" alt="Image 1">
    </a>
    <figcaption>Image 1</figcaption>
  </figure>
  <figure>
    <a href="path/to/image2.jpg" data-size="800x600">
      <img src="path/to/thumbnail2.jpg" alt="Image 2">
    </a>
    <figcaption>Image 2</figcaption>
  </figure>
  <!-- Add more images here -->
</div>

위의 코드에서 data-size 속성은 원본 이미지의 크기를 지정하는 속성입니다. 이 속성을 사용하면 효과적인 이미지 확대/축소 기능을 구현할 수 있습니다.

이제 JavaScript 코드를 사용하여 이미지 클릭 시 PhotoSwipe을 열도록 만들어보겠습니다.

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

var items = [
  {
    src: 'path/to/image1.jpg',
    w: 800,
    h: 600
  },
  {
    src: 'path/to/image2.jpg',
    w: 800,
    h: 600
  }
  // Add more images here
];

var options = {
  index: 0
};

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

document.getElementsByClassName('image-gallery')[0].addEventListener('click', function (event) {
  event.preventDefault();
  gallery.init();
});

위의 코드는 PhotoSwipe 갤러리 인스턴스를 생성하고, 이미지 링크를 클릭할 시 갤러리를 열도록 설정합니다. items 배열에는 이미지의 경로와 사이즈 정보가 포함되어야 합니다.

결론

이제 PhotoSwipe를 사용하여 이미지 스파크라인 효과를 구현하는 방법을 알아보았습니다. 이를 활용하여 웹사이트나 앱에서 멋진 이미지 갤러리를 구현할 수 있습니다. PhotoSwipe의 기능과 설정에 대한 자세한 내용은 공식 문서를 참조하시기 바랍니다.