PhotoSwipe는 모바일 및 데스크톱에서 사용할 수 있는 반응형 이미지 갤러리 및 라이트박스 라이브러리입니다. 이 라이브러리와 함께 사용하면 이미지를 화면에 표시할 때 트랜지션 효과를 적용할 수 있습니다.
PhotoSwipe 설치하기
PhotoSwipe를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. 아래의 명령을 사용하여 npm을 통해 설치할 수 있습니다.
npm install photoswipe
PhotoSwipe 초기화하기
PhotoSwipe를 초기화하고 효과를 추가하기 위해 몇 가지 작업을 진행해야 합니다. 먼저 PhotoSwipe의 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>
다음으로 JavaScript 코드에서 PhotoSwipe를 초기화해야 합니다. 아래 예제는 PhotoSwipe를 단순히 이미지에 바인딩하는 방법을 보여줍니다.
const initPhotoSwipeFromDOM = function(gallerySelector) {
const galleryElements = Array.from(document.querySelectorAll(gallerySelector));
const items = [];
galleryElements.forEach(function(element) {
const item = {
src: element.getAttribute('href'),
w: element.getAttribute('data-width'),
h: element.getAttribute('data-height')
};
items.push(item);
element.addEventListener('click', function(e) {
e.preventDefault();
const options = {
index: items.indexOf(item)
};
const gallery = new PhotoSwipe(document.querySelector('.pswp'), PhotoSwipeUI_Default, items, options);
gallery.init();
});
});
};
// PhotoSwipe 초기화 실행
initPhotoSwipeFromDOM('.my-gallery');
위 코드에서 .my-gallery은 이미지를 감싸는 엘리먼트의 클래스를 나타내는 선택자입니다. 이 선택자를 사용하여 원하는 이미지 갤러리에 PhotoSwipe를 연결할 수 있습니다.
트랜지션 효과 설정하기
PhotoSwipe의 기본적인 트랜지션 효과는 이미 제공되지만, 필요에 따라 커스텀 효과를 추가할 수도 있습니다. 이를 위해 PhotoSwipe의 beforeChange 이벤트를 사용할 수 있습니다. 아래 코드는 beforeChange 이벤트를 통해 이미지에 트랜지션 효과를 추가하는 예제입니다.
...
gallery.init();
gallery.listen('beforeChange', function() {
// 이미지에 트랜지션 효과를 추가하는 코드 작성
});
...
beforeChange 이벤트에 등록된 함수에서 원하는 트랜지션 효과를 적용할 수 있습니다.
결론
PhotoSwipe와 연동하여 이미지 트랜지션 효과를 추가하는 방법에 대해 알아보았습니다. PhotoSwipe의 다양한 옵션과 이벤트를 활용하여 원하는 효과를 구현할 수 있습니다. 보다 자세한 내용은 PhotoSwipe의 공식 문서를 참조하시기 바랍니다.
참고 자료:
- PhotoSwipe 공식 사이트: https://photoswipe.com/
- PhotoSwipe GitHub 저장소: https://github.com/dimsemenov/PhotoSwipe