[javascript] PhotoSwipe를 이용한 이미지 제목 및 캡션 표시 방법
PhotoSwipe는 JavaScript를 기반으로 한 오픈 소스 라이브러리로, 모바일 및 데스크톱 기기에서 매우 유연하게 이미지 및 갤러리를 표시할 수 있습니다. 이 라이브러리를 사용하여 이미지 제목 및 캡션을 표시하는 방법에 대해 알아보겠습니다.
1. PhotoSwipe 설치
먼저, PhotoSwipe를 프로젝트에 설치해야 합니다. 아래 명령어를 사용하여 npm을 통해 PhotoSwipe를 설치합니다.
npm install photoswipe
또는 CDN을 통해 라이브러리를 로드할 수도 있습니다. 예를 들면:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>
2. 이미지 및 캡션 데이터 준비
PhotoSwipe를 사용하여 이미지 및 캡션을 표시하려면, 표시할 이미지의 URL과 이미지에 대한 제목 및 캡션을 가진 데이터가 필요합니다. 예를 들면:
const images = [
{
src: 'image1.jpg',
title: '이미지 1',
caption: '이미지 1의 캡션'
},
{
src: 'image2.jpg',
title: '이미지 2',
caption: '이미지 2의 캡션'
},
// 추가 이미지 데이터...
];
3. PhotoSwipe 초기화 및 설정
PhotoSwipe를 초기화하고 이미지 및 캡션을 표시하는 방법은 다음과 같습니다:
const pswpElement = document.querySelectorAll('.pswp')[0];
// PhotoSwipe를 초기화합니다.
const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, images, {
// 이미지에 제목 표시 여부 설정
showTitle: true,
// 제목 및 캡션 데이터를 가져오는 콜백 함수 설정
getTextItem: function(item) {
return item.title + ' - ' + item.caption;
}
});
// PhotoSwipe를 열기 위한 이벤트를 바인딩합니다.
document.querySelectorAll('.image-item').forEach(function(item, index) {
item.addEventListener('click', function(event) {
event.preventDefault();
gallery.index = index;
gallery.open();
});
});
위의 코드에서 .pswp는 PhotoSwipe를 렌더링할 HTML 요소의 클래스를 지정하고, .image-item은 클릭할 이미지 요소의 클래스를 지정합니다. 이에 따라 HTML을 수정해야 합니다.
결과 확인하기
위의 설정이 모두 완료되면, 이미지에 마우스를 클릭하면 PhotoSwipe가 열리고 이미지 제목과 캡션을 볼 수 있습니다. PhotoSwipe는 이미지를 확대하거나 스와이프하여 다음 이미지로 이동할 수 있는 기능도 제공합니다.
이제 위의 코드를 사용하여 프로젝트에 PhotoSwipe를 통해 이미지 제목 및 캡션을 표시할 수 있습니다.
더 많은 PhotoSwipe 옵션 및 설정에 대해서는 공식 문서를 참조하시기 바랍니다.