PhotoSwipe는 웹 사이트에 이미지 갤러리를 구축하는 데 사용되는 JavaScript 라이브러리입니다. PhotoSwipe를 사용하면 이미지를 확대 또는 축소하여 사용자에게 최적의 경험을 제공할 수 있습니다. 하지만 이미지의 원래 비율을 유지하는 것은 중요한 과제입니다.

이 튜토리얼에서는 PhotoSwipe를 사용하여 이미지 비율을 유지하는 방법을 알아보겠습니다.

1. HTML 구조

우선, HTML 구조를 설정해야 합니다. 원하는 대로 이미지를 포함하는 HTML 요소를 생성해줍니다. 이 예시에서는 <div> 요소를 사용합니다.

<div id="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

2. CSS 스타일링

PhotoSwipe는 이미지 갤러리의 스타일링에 사용되는 CSS 클래스를 제공합니다. 필요한 스타일을 추가하려면 CSS 파일에 다음 클래스를 포함시켜주세요.

/* PhotoSwipe 기본 스타일 */
.pswp {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  z-index: 999;
}

/* 이미지 컨테이너 스타일 */
.pswp__item {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.8;
  background-color: #000;
}

/* 이미지 스타일 */
.pswp__img {
  max-width: none;
  max-height: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  height: auto;
}

/* 기타 필요한 스타일링 추가 */

3. JavaScript 설정

이제 JavaScript를 사용하여 PhotoSwipe를 초기화하고 이미지 비율을 유지하는 기능을 추가합니다. PhotoSwipe 라이브러리와 관련된 스크립트 파일을 다운로드하여 적절한 위치에 추가해주세요.

<script src="path/to/photoswipe.min.js"></script>
<script src="path/to/photoswipe-ui-default.min.js"></script>

다음으로, JavaScript 파일을 추가하여 PhotoSwipe를 설정합니다. 아래는 간단한 예시입니다.

// PhotoSwipe 초기화
var gallery = new PhotoSwipe(document.getElementById('gallery'), PhotoSwipeUI_Default, /* 기타 옵션 */);

// 이미지 비율 유지
gallery.listen('beforeResize', function() {
  var image = gallery.currItem.container.children[0].children[0];
  if (image) {
    var ratio = image.naturalWidth / image.naturalHeight;
    var height = gallery.viewportSize.y;
    var width = height * ratio;
    image.style.maxWidth = '100%';
    image.style.maxHeight = '100%';
    image.style.width = width + 'px';
    image.style.height = height + 'px';
  }
});

// PhotoSwipe 열기
gallery.init();

이제 PhotoSwipe를 사용하여 이미지 비율을 유지하도록 설정했습니다. 웹 사이트에 이미지 갤러리를 추가하고 사용자에게 최고의 경험을 제공하세요!

참고 자료

• PhotoSwipe 공식 문서