[javascript] PhotoSwipe를 이용한 이미지 썸네일 동적 생성 방법

22 Nov 2023

javascript

PhotoSwipe는 모바일 및 데스크탑에서 이미지 갤러리를 나타내는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 이미지 갤러리에 터치 및 스와이프 기능을 추가할 수 있으며, 이미지 썸네일을 동적으로 생성할 수도 있습니다.

이제 PhotoSwipe를 사용하여 이미지 썸네일을 동적으로 생성하는 방법을 알아보겠습니다.

1. HTML 구조 만들기

먼저, 썸네일을 나타낼 HTML 구조를 만듭니다. 썸네일 이미지는 <a> 태그로 감싸고 data-size 속성에 원본 이미지의 크기를 지정합니다. 예를 들어:

<a href="large_image.jpg" data-size="800x600">
  <img src="thumbnail.jpg" alt="Thumbnail">
</a>

위 예제에서 href 속성은 원본 이미지의 경로를, src 속성은 썸네일 이미지의 경로를 나타냅니다.

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

다음으로, PhotoSwipe 라이브러리를 HTML에 추가합니다. PhotoSwipe는 jQuery 또는 Zepto와 함께 사용할 수 있으며, 필요한 라이브러리 파일을 다운로드하여 HTML에 포함시킵니다.

<!-- PhotoSwipe 라이브러리 스타일시트 -->
<link rel="stylesheet" href="path/to/photoswipe.css">

<!-- PhotoSwipe 라이브러리 자바스크립트 파일 -->
<script src="path/to/photoswipe.min.js"></script>

<!-- PhotoSwipe UI 스타일시트 -->
<link rel="stylesheet" href="path/to/default-skin/default-skin.css">

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

3. PhotoSwipe 초기화하기

이제 PhotoSwipe를 초기화하고 썸네일을 클릭했을 때 원본 이미지를 표시하는 기능을 추가해야 합니다. 다음은 초기화하는 JavaScript 코드 예제입니다:

var initPhotoSwipeFromDOM = function(gallerySelector) {
  var parseThumbnailElements = function(el) {
    // 썸네일 요소를 파싱하여 배열로 반환하는 로직
  };

  var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
    // PhotoSwipe 열기 로직
  };

  var galleryElements = document.querySelectorAll(gallerySelector);
  
  // 썸네일을 클릭했을 때 PhotoSwipe 열도록 이벤트 핸들러 등록
  for(var i = 0, l = galleryElements.length; i < l; i++) {
    galleryElements[i].setAttribute('data-pswp-uid', i+1);
    galleryElements[i].onclick = onThumbnailClick;
  }
  
  // 썸네일 클릭 이벤트 핸들러
  var onThumbnailClick = function(e) {
    e.preventDefault();

    var clickedGallery = this;
    var index = 0;
    var children = clickedGallery.parentNode.childNodes;
    for(var i = 0, l = children.length; i < l; i++) {
      if(children[i].nodeType !== 1) continue;
      if(children[i] === clickedGallery) {
        index = parseInt(i / 2); // 썸네일 요소가 odd numbered 인덱스에 위치하는 것을 감안
        break;
      }
    }
    
    openPhotoSwipe(index, clickedGallery.parentNode, false, true);
    return false;
  };
};

// 초기화 함수 호출
initPhotoSwipeFromDOM('.my-gallery');

위 예제에서 .my-gallery은 썸네일이 표시되는 부모 요소의 CSS 선택자입니다. 이 부분을 자신의 HTML 구조에 맞게 수정해야 합니다.

결론

위에서 언급한 방법을 따라하면 PhotoSwipe를 사용하여 이미지 썸네일을 동적으로 생성할 수 있습니다. 썸네일을 클릭하면 원본 이미지가 표시되는 터치 및 스와이프 기능을 갖춘 이미지 갤러리를 생성할 수 있습니다.

PhotoSwipe 공식 문서에서 자세한 내용을 확인하고 원하는 스타일 및 기능을 추가할 수 있습니다.

PhotoSwipe 공식 문서: http://photoswipe.com/

이제 PhotoSwipe를 활용하여 멋진 이미지 갤러리를 만들어 보세요!