Colin's Blog
[javascript] PhotoSwipe를 이용한 이미지 및 텍스트 정보 표시 방법

PhotoSwipe는 모바일 및 데스크톱 웹에서 사용할 수 있는 자바스크립트 기반의 이미지 갤러리 라이브러리입니다. 이 라이브러리는 사용자가 이미지를 확대 및 축소하고 화면을 스와이프하여 이미지를 탐색할 수 있는 기능을 제공합니다. 또한 이미지와 관련된 텍스트 정보도 함께 표시할 수 있습니다.

1. PhotoSwipe 설치하기

PhotoSwipe를 사용하기 위해서는 PhotoSwipe의 JavaScript 파일과 CSS 파일을 다운로드하여 웹페이지에 추가해야 합니다. 아래 코드를 사용하여 PhotoSwipe와 관련 파일을 다운로드 받을 수 있습니다.

<link rel="stylesheet" href="path/to/photoswipe.css">
<link rel="stylesheet" href="path/to/default-skin/default-skin.css">
<script src="path/to/photoswipe.js"></script>
<script src="path/to/photoswipe-ui-default.js"></script>

주의: 본인의 프로젝트에 필요한 파일의 경로를 사용해주세요.

2. HTML 구조 설정하기

PhotoSwipe를 사용하기 위해선 특정한 HTML 구조를 만들어야 합니다. 아래의 예시 코드를 사용하여 이미지와 텍스트 정보를 포함하는 HTML을 구성해주세요.

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="pswp__bg"></div>
  <div class="pswp__scroll-wrap">
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__top-bar">
        <div class="pswp__counter"></div>
        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
        <button class="pswp__button pswp__button--share" title="Share"></button>
        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
        <div class="pswp__preloader">
          <div class="pswp__preloader__icn">
            <div class="pswp__preloader__cut">
              <div class="pswp__preloader__donut"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
        <div class="pswp__share-tooltip"></div> 
      </div>
      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
      <div class="pswp__caption">
        <div class="pswp__caption__center"></div>
      </div>
    </div>
  </div>
</div>

위의 코드를 사용하여, 다음의 항목을 수정 및 추가할 수 있습니다.

3. JavaScript로 PhotoSwipe 초기화하기

PhotoSwipe를 사용하기 위해 JavaScript를 작성하여 초기화해야 합니다. 아래 예시 코드는 초기화하는 예시입니다.

var initPhotoSwipeFromDOM = function(gallerySelector) {

  // 이미지 및 텍스트 정보를 담는 div들을 가져옵니다.
  var parseThumbnailElements = function(el) {
    // el로부터 이미지 및 텍스트 정보를 가져와서 반환하는 로직을 작성해주세요.
  };

  var photoswipeParseHash = function() {
    // URL 해시를 파싱하여 이미지 및 텍스트 정보를 가져와서 반환하는 로직을 작성해주세요.
  };

  var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
    // PhotoSwipe를 열기 위해 필요한 로직을 작성해주세요.
  };

  var galleryElements = document.querySelectorAll(gallerySelector);

  // 각각의 이미지를 클릭했을 때 해당 이미지의 정보를 파싱하여 처리하는 로직을 작성해주세요.

  // 기타 필요한 로직을 추가해주세요.
};

// PhotoSwipe를 특정한 클래스명을 가진 요소에 적용하기 위한 초기화 함수 호출
initPhotoSwipeFromDOM('.my-gallery');

주의: 각각의 함수에서 필요한 로직을 작성해주세요.

4. CSS 스타일 추가하기

PhotoSwipe에 대한 스타일을 추가하여 사용자 정의 스타일을 적용할 수도 있습니다. 아래의 CSS 코드는 기본 스타일을 제공합니다. 필요한 경우 스타일을 추가하실 수 있습니다.

/* 기본 스타일 */
.pswp__ui--fit .pswp__caption {
  bottom: 44px;
}
.pswp__ui--fit .pswp__button--arrow--left, .pswp__ui--fit .pswp__button--arrow--right, .pswp__ui--fit .pswp__counter, .pswp__ui--fit .pswp__caption__center {
  right: 50%;
  margin-right: -110px;
}
.pswp__preload .pswp__preloader__icn {
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
}
/* 사용자 정의 스타일을 추가해주세요. */

PhotoSwipe를 이용하여 이미지와 텍스트 정보를 표시하는 방법을 알아보았습니다. 웹페이지에서 PhotoSwipe를 통해 사용자 친화적인 이미지 갤러리를 구현할 수 있습니다.

더 자세한 내용은 PhotoSwipe 공식 문서를 참조해주세요.

© 2018 Colin. All rights reserved.