이미지 갤러리는 웹 사이트에 시각적인 요소를 추가하여 사용자들이 사진을 더욱 쉽게 볼 수 있게 해줍니다. PhotoSwipe는 자바스크립트 기반의 오픈 소스 이미지 갤러리 라이브러리로, 모바일 기기와 데스크톱에서 모두 원활하게 작동합니다.

이번 튜토리얼에서는 PhotoSwipe를 사용하여 웹 사이트에 이미지 갤러리를 추가하는 방법을 알아보겠습니다.

PhotoSwipe 라이브러리 추가하기

우선, PhotoSwipe 라이브러리 파일을 다운로드하고 웹 사이트의 적절한 디렉토리에 추가해야 합니다. 라이브러리는 공식 웹 사이트에서 다운로드할 수 있으며, “photoswipe.min.js”와 “photoswipe-ui-default.min.js” 파일이 필요합니다.

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

또한, PhotoSwipe를 스타일링하기 위해 CSS 파일도 추가해야 합니다.

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

갤러리 마크업 작성하기

이제, 이미지를 갤러리로 그룹화하기 위해 갤러리 마크업을 작성해야 합니다. 각 이미지에 대한 섬네일(작은 이미지)과 실제 이미지 링크를 제공해야 합니다.

<div class="my-gallery">
  <figure>
    <a href="path/to/image1.jpg">
      <img src="path/to/thumbnail1.jpg" alt="Image 1">
    </a>
    <figcaption>Caption for Image 1</figcaption>
  </figure>
  <figure>
    <a href="path/to/image2.jpg">
      <img src="path/to/thumbnail2.jpg" alt="Image 2">
    </a>
    <figcaption>Caption for Image 2</figcaption>
  </figure>
  <!-- 추가 이미지들 -->
</div>

PhotoSwipe 초기화하기

갤러리 마크업을 작성하면, PhotoSwipe를 초기화해야 합니다. 자바스크립트 코드를 사용하여 PhotoSwipe를 활성화하고 갤러리에 대한 설정을 정의할 수 있습니다.

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

위의 코드에서 ‘.my-gallery’는 갤러리 마크업을 가리키는 CSS 선택자입니다. PhotoSwipe는 이 선택자를 통해 해당 갤러리를 찾아옵니다.

마무리

이제 PhotoSwipe와 연동하여 웹 사이트에 이미지 갤러리를 추가하는 방법을 알게 되었습니다. 이 방법을 사용하면 사용자들이 웹 사이트에서 사진을 쉽게 볼 수 있게 되며, 더 나은 사용자 경험을 제공할 수 있습니다.

PhotoSwipe는 매우 유연하며 다양한 설정과 기능을 제공합니다. 공식 문서를 통해 더 많은 설정 및 사용 예시를 확인할 수 있습니다.

• PhotoSwipe 공식 사이트
• PhotoSwipe GitHub 저장소