PhotoSwipe는 모바일 및 데스크톱에서 터치, 스와이프 및 확대 / 축소 등의 제스처를 사용하여 이미지를 표시하고 탐색할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 이미지 투명 배경 효과를 구현하는 방법에 대해 알아보겠습니다.
PhotoSwipe 설치하기
PhotoSwipe를 사용하기 위해서는 먼저 설치하여 프로젝트에 추가해야 합니다. NPM을 사용하거나 직접 파일을 다운로드하여 사용할 수 있습니다. 아래는 NPM을 통해 PhotoSwipe를 설치하는 방법입니다.
npm install photoswipe
npm install photoswipe/dist/photoswipe-ui-default
HTML 마크업 준비하기
PhotoSwipe를 사용하기 위해 HTML 파일에 이미지를 감싸는 마크업을 추가해야 합니다. 일반적으로 div 요소를 사용하며, 이미지를 클릭할 때마다 효과가 나타나도록 data-pswp-uid 속성을 설정해 줍니다.
<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>
<!-- 이미지를 감싸는 요소 -->
<div class="image-container" data-pswp-uid="1">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="image-container" data-pswp-uid="2">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="image-container" data-pswp-uid="3">
<img src="image3.jpg" alt="Image 3">
</div>
JavaScript 코드 작성하기
PhotoSwipe를 초기화하고 이벤트 핸들러를 설정하기 위해 JavaScript 코드를 작성해야 합니다. 아래는 initPhotoSwipeFromDOM 함수를 통해 PhotoSwipe를 초기화하는 코드입니다.
function initPhotoSwipeFromDOM(gallerySelector) {
// 모든 이미지 컨테이너를 가져옴
var galleryElements = document.querySelectorAll(gallerySelector);
// 이미지 효과를 적용할 때마다 실행할 함수 정의
var onContainerClick = function(event) {
// 현재 클릭한 이미지의 인덱스를 가져옴
var index = event.target.getAttribute('data-pswp-uid');
// 이미지 배열 생성
var items = [];
galleryElements.forEach(function(galleryElement) {
var img = galleryElement.querySelector('img');
var item = {
src: img.getAttribute('src'),
w: img.naturalWidth,
h: img.naturalHeight,
title: img.getAttribute('alt')
};
items.push(item);
});
// PhotoSwipe 초기화
var pswpElement = document.querySelector('.pswp');
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {index: index});
gallery.init();
};
// 각 이미지 컨테이너에 클릭 이벤트 핸들러 등록
galleryElements.forEach(function(galleryElement) {
galleryElement.addEventListener('click', onContainerClick);
});
}
// 초기화 코드 실행
window.onload = function() {
initPhotoSwipeFromDOM('.image-container');
};
사용자 정의 CSS 적용하기
PhotoSwipe를 사용하는 동안 원하는 스타일을 적용하기 위해 CSS를 사용할 수 있습니다. PhotoSwipe 클래스 및 하위 요소의 스타일을 수정하면 됩니다. 아래는 예제 CSS 코드입니다.
/* 투명 배경 설정 */
.pswp {
background-color: rgba(0, 0, 0, 0.85);
}
/* 이미지 컨테이너 스타일 설정 */
.image-container {
cursor: pointer;
}
/* 선택된 이미지 강조 표시 */
.image-container.selected {
border: 2px solid #ff0000;
}
결론
이제 PhotoSwipe를 사용하여 이미지 투명 배경 효과를 구현하는 방법을 알게 되었습니다. 이를 통해 사용자들이 웹페이지에서 이미지를 더욱 편리하게 탐색할 수 있게 됩니다. PhotoSwipe를 사용하면 다양한 제스처와 효과를 적용하여 UX를 향상시킬 수 있으므로, 프로젝트에 적용해 보는 것을 권장합니다.