[javascript] PhotoSwipe를 이용한 이미지 메타데이터 편집 방법

22 Nov 2023

javascript

PhotoSwipe 설치

PhotoSwipe를 사용하기 위해 우선 이를 다운로드하고 HTML 문서에 연결해야 합니다. 아래의 스크립트 태그를 HTML 문서의 <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>

또한, PhotoSwipe를 사용할 이미지들을 담은 갤러리 요소를 생성해야 합니다. 갤러리 요소는 다음과 같은 형태로 작성됩니다. href 속성에는 큰 이미지의 URL을, data-size 속성에는 이미지의 원래 크기를, 그리고 title 속성에는 이미지에 대한 추가 정보를 입력합니다.

<div class="my-gallery">
  <figure>
    <a href="path/to/image.jpg" data-size="800x600" title="Image 1">
      <img src="path/to/thumbnail.jpg" alt="Image 1">
    </a>
  </figure>
  <!-- 다른 이미지들... -->
</div>

이미지 메타데이터 편집

이미지의 메타데이터를 편집하기 위해서는 PhotoSwipe 객체의 parseThumbnailElements 메소드를 사용합니다. 이 메소드는 DOM 요소의 배열을 인자로 받아서, 각 요소의 데이터 속성을 분석하여 이미지의 메타데이터를 설정합니다.

var pswpElement = document.querySelectorAll('.my-gallery')[0]; // PhotoSwipe 컨테이너 요소
var items = []; // 이미지 아이템들을 담을 배열

// 이미지 아이템들의 DOM 요소들을 가져옴
var galleryElements = document.querySelectorAll('.my-gallery figure');

// 이미지 아이템들을 배열에 추가
for(var i = 0; i < galleryElements.length; i++) {
  var galleryItem = galleryElements[i];
  
  var image = galleryItem.getElementsByTagName('img')[0];
  var item = {
    src: galleryItem.getElementsByTagName('a')[0].getAttribute('href'), // 큰 이미지의 URL
    w: parseInt(image.getAttribute('data-size').split('x')[0]), // 원래 이미지의 너비
    h: parseInt(image.getAttribute('data-size').split('x')[1]), // 원래 이미지의 높이
    title: galleryItem.getElementsByTagName('a')[0].getAttribute('title') // 추가 정보
  };

  items.push(item);
}

// 이미지 아이템들을 이용하여 PhotoSwipe 인스턴스를 생성
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, { index: 0 });

// 이벤트 핸들러를 추가하여 이미지를 클릭하면 갤러리가 열리도록 설정
for(var j = 0; j < galleryElements.length; j++) {
  galleryElements[j].addEventListener('click', function(event) {
    event.preventDefault(); // 기본 동작 방지
    gallery.init();
  });
}

위의 코드를 HTML 문서에 추가한 뒤, 이미지를 클릭하면 해당 이미지에 대한 메타데이터가 설정되고, PhotoSwipe 갤러리가 열리게 됩니다.

PhotoSwipe를 사용하여 이미지 메타데이터를 편집하는 방법에 대해 알아보았습니다. 이를 통해 사용자들은 웹 사이트에서 이미지를 더 쉽게 탐색하고 추가 정보를 확인할 수 있을 것입니다. PhotoSwipe의 다른 기능도 함께 살펴보고 활용해보세요.

참고 자료: