Colin's Blog
[javascript] PhotoSwipe를 이용한 이미지 페이드 인 아웃 효과 구현 방법

이미지 갤러리에서 페이드 인/아웃 효과를 적용하고 싶다면, PhotoSwipe 라이브러리를 사용할 수 있습니다. PhotoSwipe는 JavaScript로 작성된 모바일 및 데스크톱용 이미지 및 동영상 갤러리를 구현하는 강력한 도구입니다. 이 블로그 게시물에서는 PhotoSwipe를 사용하여 이미지 페이드 인/아웃 효과를 구현하는 방법에 대해 알아보겠습니다.

1. PhotoSwipe 설치하기

PhotoSwipe를 사용하기 위해 먼저 설치해야 합니다. 다음과 같이 HTML 페이지의 head 태그 내에 PhotoSwipe의 CSS와 JavaScript 파일을 추가합니다.

<head>
  ...
  <!-- PhotoSwipe CSS 파일 추가 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css">

  <!-- PhotoSwipe JavaScript 파일 추가 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>
  ...
</head>

2. 이미지 페이드 인/아웃 효과 구현하기

이제 PhotoSwipe를 이용하여 이미지 페이드 인/아웃 효과를 구현해보겠습니다.

<body>
  ...

  <!-- 이미지 갤러리 -->
  <div class="my-gallery">
    <figure>
      <a href="img/image1.jpg" data-size="1200x800">
        <img src="img/thumb1.jpg" alt="Image 1">
      </a>
      <figcaption>Caption 1</figcaption>
    </figure>
    <figure>
      <a href="img/image2.jpg" data-size="900x600">
        <img src="img/thumb2.jpg" alt="Image 2">
      </a>
      <figcaption>Caption 2</figcaption>
    </figure>
    ...
  </div>

  ...

  <!-- JavaScript 코드 -->
  <script>
    // 갤러리 요소 선택
    var gallery = document.querySelector('.my-gallery');

    // PhotoSwipe 초기화
    var pswpElement = document.querySelectorAll('.pswp')[0];
    var items = [];

    gallery.querySelectorAll('figure').forEach(function(figure) {
      var linkEl = figure.querySelector('a');
      var size = linkEl.getAttribute('data-size').split('x');
      var item = {
        src: linkEl.getAttribute('href'),
        w: parseInt(size[0], 10),
        h: parseInt(size[1], 10),
        title: figure.querySelector('figcaption').innerHTML
      };
      items.push(item);

      linkEl.addEventListener('click', function(e) {
        e.preventDefault();
      
        var options = {
          index: items.indexOf(item),
          closeOnScroll: false,
          showHideOpacity: true
        };
      
        var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
      });
    });
  </script>
</body>

위의 코드는 기본적인 PhotoSwipe 이미지 페이드 인/아웃 효과를 구현하는 예제입니다.

PhotoSwipe의 CSS와 JavaScript 파일을 페이지에 추가한 후, 이미지 갤러리를 구현하기 위해 갤러리 컨테이너 요소를 선택하고, 각 이미지에 대한 정보를 설정합니다. 그리고 click 이벤트 핸들러를 등록하여 이미지를 클릭할 때 PhotoSwipe 갤러리를 열도록 합니다.

앞서 작성한 코드에는 CSS 스타일링은 포함되어 있지 않으므로 필요에 따라 각 요소에 스타일을 적용해야 합니다.

결론

PhotoSwipe를 사용하면 이미지 페이드 인/아웃 효과를 구현하기 매우 편리해집니다. 이 라이브러리의 강력한 기능을 활용하여 멋진 이미지 갤러리를 구현할 수 있습니다. 자세한 내용은 PhotoSwipe 공식 문서를 참고하시기 바랍니다.

참고 자료:

© 2018 Colin. All rights reserved.