PhotoSwipe에서 이미지에 부가 정보를 표시하기 위해서는 이미지의 링크를 클릭했을 때 해당 이미지와 관련된 정보를 포함하는 HTML 요소를 생성해야 합니다. 이를 위해 다음과 같은 코드를 작성하십시오:

<a href="path/to/image.jpg" data-size="800x600" data-attribute="your-attribute-value">
  <img src="path/to/thumbnail.jpg" alt="Image">
</a>

위의 코드에서는 a 요소를 사용하여 이미지에 링크를 설정하고, data-size 속성을 사용하여 이미지의 크기를 지정할 수 있습니다. 또한, data-attribute 속성을 사용하여 이미지와 관련된 부가 정보를 지정할 수 있습니다.

이제, 이러한 요소들을 생성한 후에는 PhotoSwipe를 초기화하고 이미지에 부가 정보를 표시해야 합니다. PhotoSwipe를 초기화하는 부분에 다음과 같은 코드를 추가합니다:

var pswpElement = document.querySelectorAll('.pswp')[0];
var items = [
  {
    src: 'path/to/image.jpg',
    w: 800,
    h: 600,
    title: 'Image Title',
    attribute: 'Your Attribute'
  }
];

var options = {
  galleryUID: 0,
  index: 0,
  // PhotoSwipe에서 사용할 부가 정보를 표시하기 위한 템플릿
  getThumbBoundsFn: function(index) {
   var thumbnail = document.querySelectorAll('img')[index];
   var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
   var rect = thumbnail.getBoundingClientRect();
   return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
  }
};

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

위의 코드에서 items 배열에 이미지와 관련된 정보를 추가합니다. 여기에서 title 속성은 이미지의 제목을, attribute 속성은 이미지와 관련된 부가 정보를 의미합니다.

마지막으로, PhotoSwipe에서 부가 정보를 표시하기 위한 템플릿을 설정해야 합니다. 위의 코드에서 getThumbBoundsFn 함수는 부가 정보를 표시하기 위한 템플릿을 반환하는 역할을 합니다.

이제 위의 코드를 사용하여 PhotoSwipe를 초기화하고 이미지에 부가 정보를 표시하는 방법을 알아보았습니다. 이를 활용하여 사용자 친화적인 이미지 갤러리를 구현해 보세요!

참고 자료:

• PhotoSwipe 공식 웹사이트: https://photoswipe.com/
• PhotoSwipe GitHub 저장소: https://github.com/dimsemenov/PhotoSwipe