이미지 갤러리를 만들고 싶을 때, 사용자들은 자연스럽게 이미지를 그룹으로 묶을 수 있는 방법을 찾게 됩니다. 이때 PhotoSwipe라는 JavaScript 라이브러리를 사용하면 이미지를 그룹화하고 분류하는 것이 매우 간단해집니다.
PhotoSwipe 소개
PhotoSwipe는 모바일 및 데스크탑에서 사용할 수 있는 반응형 이미지 갤러리 및 라이트박스 라이브러리입니다. 이 라이브러리는 슬라이드쇼 및 제스처 기능을 제공하며, 사용자가 갤러리 내에서 이미지를 확대 및 축소할 수 있도록 합니다.
이미지 그룹화
PhotoSwipe를 사용하여 이미지를 그룹화하려면 각 이미지 요소에 동일한 데이터 그룹 속성을 할당해야 합니다. 일반적으로 data-pswp-uid라는 속성을 지정하여 그룹을 식별할 수 있습니다.
<div class="image-gallery">
<figure>
<a href="image1.jpg" data-pswp-uid="group1">
<img src="thumbnail1.jpg" alt="Image 1">
</a>
<figcaption>Image 1</figcaption>
</figure>
<figure>
<a href="image2.jpg" data-pswp-uid="group1">
<img src="thumbnail2.jpg" alt="Image 2">
</a>
<figcaption>Image 2</figcaption>
</figure>
<figure>
<a href="image3.jpg" data-pswp-uid="group2">
<img src="thumbnail3.jpg" alt="Image 3">
</a>
<figcaption>Image 3</figcaption>
</figure>
</div>
위의 예시에서 이미지 1과 이미지 2는 data-pswp-uid="group1"로, 이미지 3은 data-pswp-uid="group2"로 지정됩니다. 이렇게 함으로써, PhotoSwipe는 그룹마다 따로 이미지를 로드하고 분류할 수 있게 됩니다.
PhotoSwipe 초기화
PhotoSwipe를 초기화하기 위해 다음과 같은 JavaScript 코드를 사용할 수 있습니다.
var pswpElement = document.querySelectorAll('.pswp')[0];
// 이미지 그룹화 및 분류
var items = [
{
src: 'image1.jpg',
w: 800,
h: 600
},
{
src: 'image2.jpg',
w: 800,
h: 600
},
{
src: 'image3.jpg',
w: 800,
h: 600
}
];
// PhotoSwipe 열기
document.querySelectorAll('.image-gallery').addEventListener('click', function(e) {
if(e.target.tagName === 'IMG') {
var options = {
index: parseInt(e.target.parentNode.getAttribute('data-pswp-uid'))
// 클릭한 이미지의 그룹 인덱스로 초기 인덱스 설정
};
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}
});
위의 코드에서 pswpElement의 값은 PhotoSwipe 모달을 표시할 요소를 참조해야 합니다. 또한 items 배열은 각 이미지에 대한 소스(src)와 이미지의 너비(w) 및 높이(h)를 포함하고 있습니다.
마지막으로, .image-gallery 클래스를 가진 요소에 클릭 이벤트 리스너를 추가하여 이미지를 클릭할 때 PhotoSwipe를 열 수 있도록 합니다.
PhotoSwipe를 사용하여 이미지를 그룹화하고 분류하는 방법에 대해 알아보았습니다. PhotoSwipe 라이브러리 문서를 자세히 살펴보면 더 많은 기능과 옵션을 확인할 수 있습니다.