[javascript] PhotoSwipe를 이용한 이미지 리트리밍 및 캔버스 효과 설명

22 Nov 2023

javascript

PhotoSwipe는 자바스크립트 기반의 오픈 소스 라이브러리로, 사진 및 이미지 갤러리를 만들기 위해 사용됩니다. 이 라이브러리는 다양한 터치 제스처와 함께 사진의 확대, 축소, 드래그 및 캔버스 효과를 구현할 수 있습니다. 이번 글에서는 PhotoSwipe를 사용하여 이미지 리트리밍 및 캔버스 효과를 구현하는 방법에 대해 소개하겠습니다.

1. PhotoSwipe 설치 및 설정

PhotoSwipe를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드하고 프로젝트에 추가해야 합니다. 아래는 HTML 파일에 PhotoSwipe를 추가하는 예시입니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="path/to/photoswipe.css" />
    <link rel="stylesheet" href="path/to/default-skin.css" />
  </head>
  <body>
    <!-- 이미지 갤러리 -->
    <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
      <!-- 이미지 항목 -->
      <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="path/to/image.jpg" itemprop="contentUrl" data-size="1200x800">
          <img src="path/to/image-thumbnail.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
      </figure>
      <!-- 추가 이미지 항목들 -->
    </div>

    <!-- PhotoSwipe 스크립트 추가 -->
    <script src="path/to/photoswipe.min.js"></script>
    <script src="path/to/photoswipe-ui-default.min.js"></script>

    <!-- 스크립트를 사용하여 PhotoSwipe 초기화 -->
    <script>
      var gallery = new PhotoSwipe('.my-gallery', PhotoSwipeUI_Default, items, options);
      gallery.init();
    </script>
  </body>
</html>

2. 이미지 리트리밍

PhotoSwipe를 사용하여 이미지를 리트리밍하는 방법은 다양하지만, 가장 일반적인 방법은 data-size 속성을 사용하는 것입니다. 위의 예시 코드에서 이미지의 data-size 속성은 “1200x800”으로 설정되어 있습니다. 이 속성은 기본 이미지 크기를 나타내며, PhotoSwipe는 이미지를 해당 크기로 보여줍니다. 만약 이미지가 실제 크기보다 작은 경우, PhotoSwipe는 이미지를 확대해서 보여주게 됩니다.

3. 캔버스 효과

PhotoSwipe를 사용하여 캔버스 효과를 구현하기 위해서는 CSS를 사용하여 원하는 스타일을 적용해야 합니다. 아래는 간단한 캔버스 효과 스타일 예시입니다.

.my-gallery figure {
  position: relative;
  overflow: hidden;
}

.my-gallery figure::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.my-gallery figure:hover::before {
  opacity: 1;
}

위의 코드에서 my-gallery 클래스에 figure 태그가 있는 요소에 캔버스 효과 스타일을 적용합니다. before 유사 클래스를 사용하여 캔버스 효과를 구현하는데, 해당 요소에 마우스를 올리면 배경색이 어둡게 변하고 투명도가 증가합니다.

이제 위의 방법을 사용하여 PhotoSwipe를 이용한 이미지 리트리밍 및 캔버스 효과를 구현할 수 있습니다. 이러한 효과는 웹 사이트나 애플리케이션에서 사진 및 이미지 갤러리를 더욱 멋지고 상호작용적으로 보여주는 데 도움이 될 것입니다.

참고 자료

PhotoSwipe 공식 문서: https://photoswipe.com/documentation/intro.html