[javascript] PhotoSwipe를 이용한 이미지 통계 정보 표시 방법

22 Nov 2023

javascript

PhotoSwipe는 웹사이트에서 이미지 갤러리를 구현하는 데 많이 사용되는 자바스크립트 라이브러리입니다. 이 라이브러리를 활용하여 이미지 통계 정보를 표시하는 방법에 대해 알아보겠습니다.

통계 정보 데이터 준비

먼저, 이미지 통계 정보를 표시하기 위한 데이터를 준비해야 합니다. 예를 들어, 각 이미지에 대한 조회수, 좋아요 수 등을 포함하는 JSON 형식의 데이터를 생성합니다.

var images = [
  {
    src: "image1.jpg",
    views: 100,
    likes: 50
  },
  {
    src: "image2.jpg",
    views: 200,
    likes: 70
  },
  // ...
];

PhotoSwipe 설정

다음으로, PhotoSwipe를 초기화하고 통계 정보를 표시하기 위한 설정을 추가해야 합니다.

// PhotoSwipe 초기화
var gallery = new PhotoSwipe('.my-gallery', PhotoSwipeUI_Default, images, options);

// 통계 정보 표시
gallery.listen('beforeChange', function() {
  var currentItem = gallery.currItem;
  var stats = currentItem.stats;

  // 통계 정보 업데이트
  var statsElement = document.getElementById('stats');
  statsElement.innerHTML = "조회수: " + stats.views + " / 좋아요: " + stats.likes;
});

HTML 마크업

마지막으로, HTML에 이미지 갤러리와 통계 정보를 표시할 요소를 추가합니다.

<div class="my-gallery">
  <!-- 이미지 갤러리 요소 -->
</div>

<div id="stats">
  <!-- 통계 정보 표시 요소 -->
</div>

결과 확인

위의 코드를 적용하고 웹사이트를 실행하면 PhotoSwipe를 통해 이미지를 볼 수 있고, 각 이미지의 통계 정보가 표시될 것입니다. 이미지를 넘기면 통계 정보도 자동으로 업데이트됩니다.

PhotoSwipe를 사용하면 이미지 갤러리의 시각적인 표현과 함께 부가적인 정보를 표시할 수 있어 사용자에게 더 많은 컨텐츠를 제공할 수 있습니다.

참고 자료: