이미지 갤러리를 보여주기 위해 주로 사용되는 JavaScript 라이브러리인 PhotoSwipe는 사용자들이 이미지를 확대, 축소하고 조작할 수 있는 풍부한 기능을 제공합니다. 이번에는 PhotoSwipe 라이브러리를 사용하여 이미지를 옆으로 뒤집는 효과를 설명해보겠습니다.

1. PhotoSwipe 설치하기

첫 번째 단계로, PhotoSwipe를 프로젝트에 설치해야 합니다. 이를 위해 다음과 같이 스크립트를 HTML 파일에 추가합니다.

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

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

위 코드에서 주석 처리된 부분은 선택 사항으로, 미리 제공되는 스킨을 사용하지 않거나 사용자 정의 스킨을 사용하려는 경우에만 사용됩니다.

2. 이미지 갤러리 구성하기

이제 이미지 갤러리를 구성하는 부분입니다. 다음과 같은 HTML 구조를 사용하여 갤러리를 생성합니다.

<div class="gallery">
  <figure>
    <a href="path/to/image1.jpg" data-size="1024x768">
      <img src="path/to/thumb1.jpg" alt="">
    </a>
    <figcaption>이미지 1</figcaption>
  </figure>
  <figure>
    <a href="path/to/image2.jpg" data-size="1024x768">
      <img src="path/to/thumb2.jpg" alt="">
    </a>
    <figcaption>이미지 2</figcaption>
  </figure>
  <!-- 추가 이미지들 -->
</div>

주요 포인트:

• .gallery 클래스는 갤러리 컨테이너를 나타냅니다.
• figure 요소는 각 이미지와 캡션을 감싸는 컨테이너 역할을 합니다.
• a 요소의 href 속성은 원본 이미지의 경로를 지정하며, data-size 속성은 이미지의 크기를 지정합니다.
• 캡션은 figcaption 요소 내에 작성합니다.

3. JavaScript 코드 작성하기

마지막으로, JavaScript 코드를 작성하여 이전에 구성한 이미지 갤러리에 PhotoSwipe 효과를 적용합니다. 다음은 간단한 코드 예시입니다.

var gallery = new PhotoSwipe( document.querySelector('.gallery'), PhotoSwipeUI_Default, [
  { src: 'path/to/image1.jpg', w: 1024, h: 768 },
  { src: 'path/to/image2.jpg', w: 1024, h: 768 },
  // 추가 이미지들
]);

gallery.init();

위 코드에서 주요 포인트는 다음과 같습니다.

• PhotoSwipe 객체를 생성하여 갤러리 요소와 옵션을 전달합니다.
• src는 이미지 경로, w와 h는 이미지 크기를 나타냅니다.
• gallery.init();은 갤러리를 초기화합니다.

마무리

PhotoSwipe를 사용하여 이미지를 옆으로 뒤집는 효과를 만들 수 있습니다. 위에서 설명한 방법을 활용하여 프로젝트에 적용해보세요. PhotoSwipe 라이브러리의 다양한 기능을 익히고 활용하면 더욱 풍부한 이미지 갤러리를 구성할 수 있습니다.

PhotoSwipe 공식 문서: https://photoswipe.com/documentation/getting-started.html