[javascript] PhotoSwipe를 이용한 이미지 옵시디언 필터 효과 구현 방법

22 Nov 2023

javascript

이미지 필터링은 웹 개발에서 많이 사용되는 기능 중 하나입니다. 이번 글에서는 PhotoSwipe 라이브러리를 사용하여 이미지에 옵시디언 필터 효과를 구현하는 방법을 알아보겠습니다.

PhotoSwipe란?

PhotoSwipe는 JavaScript 라이브러리로, 터치 기반의 이미지 및 갤러리 뷰어로 사용됩니다. 이미지와 함께 제스처 동작을 지원하며, 다양한 플랫폼과 장치에서 사용할 수 있습니다.

옵시디언 필터링 효과 구현하기

PhotoSwipe를 사용하여 옵시디언 필터링 효과를 구현하려면 다음 단계를 따르세요.

1. PhotoSwipe 라이브러리 추가하기

먼저, PhotoSwipe를 다운로드하고 HTML 파일에 연결해야 합니다. 다음과 같이 <head> 태그 안에 스타일시트와 자바스크립트 파일을 추가합니다.

<head>
  <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>
</head>

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

옵시디언 필터링 효과를 적용할 이미지 갤러리를 HTML로 구성해야 합니다. 다음과 같은 형태로 구성할 수 있습니다.

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="path/to/image-1.jpg" itemprop="contentUrl" data-size="800x600">
      <img src="path/to/image-1-thumbnail.jpg" itemprop="thumbnail" alt="Image 1">
    </a>
    <figcaption itemprop="caption description">Image 1</figcaption>
  </figure>
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="path/to/image-2.jpg" itemprop="contentUrl" data-size="800x600">
      <img src="path/to/image-2-thumbnail.jpg" itemprop="thumbnail" alt="Image 2">
    </a>
    <figcaption itemprop="caption description">Image 2</figcaption>
  </figure>
  <!-- 추가 이미지 -->
</div>

3. JavaScript 코드 추가하기

이제 JavaScript 코드를 추가하여 옵시디언 필터링 효과를 활성화합니다. 다음과 같이 <script> 태그를 추가합니다.

var pswpElement = document.querySelectorAll('.my-gallery')[0];

var items = [
  {
    src: 'path/to/image-1.jpg',
    w: 800,
    h: 600
  },
  {
    src: 'path/to/image-2.jpg',
    w: 800,
    h: 600
  },
  // 추가 이미지 정보
];

var options = {
  index: 0, // 첫 번째 이미지부터 보여줌
  bgOpacity: 0.9,
  shareEl: false // 공유 버튼 비활성화
};

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

위 코드에서 items 배열에는 이미지의 경로와 크기 정보를 추가해야 합니다. 또한, 필요에 따라 options 객체를 조정하여 원하는 효과를 적용할 수 있습니다.

4. CSS 스타일 수정하기

마지막으로, CSS를 수정하여 옵시디언 필터링 효과를 디자인에 맞게 조정할 수 있습니다.

.my-gallery img {
  width: 100%;
  height: auto;
}

이제 이미지 갤러리를 열면 옵시디언 필터링 효과가 적용될 것입니다.

결론

이제 PhotoSwipe를 사용하여 이미지에 옵시디언 필터 효과를 구현하는 방법을 알아보았습니다. PhotoSwipe를 통해 사용자 친화적인 이미지 갤러리를 만들 수 있으며, 다양한 효과와 설정을 적용할 수 있습니다.

PhotoSwipe 공식 문서: link