PhotoSwipe는 웹 사이트에서 이미지 갤러리를 구현할 때 많이 사용되는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 이미지 사이즈 조절 기능을 구현하는 방법에 대해 알아보겠습니다.
1. PhotoSwipe 설치
먼저, PhotoSwipe를 웹 프로젝트에 설치해야 합니다. npm을 사용한다면 다음 명령어를 사용하여 설치할 수 있습니다.
npm install photoswipe
또는, 다운로드하여 웹 페이지에 직접 추가할 수도 있습니다. PhotoSwipe 다운로드 페이지에서 최신 버전을 다운로드하고, 압축을 해제한 후 photoswipe.min.js와 photoswipe-ui-default.min.js 파일을 웹 페이지에 추가합니다.
2. HTML 마크업 작성
PhotoSwipe를 사용하기 위해서는 각 이미지에 대한 HTML 마크업이 필요합니다. 일반적으로 <a> 태그 안에 <img> 태그를 사용하여 이미지를 감싸는 것이 일반적입니다. 다음과 같이 작성해보겠습니다.
<div class="my-gallery">
<a href="path_to_large_image_1.jpg">
<img src="path_to_thumbnail_image_1.jpg" alt="Image 1">
</a>
<a href="path_to_large_image_2.jpg">
<img src="path_to_thumbnail_image_2.jpg" alt="Image 2">
</a>
<!-- 추가 이미지 -->
</div>
path_to_large_image_X.jpg는 원본 이미지의 경로를, path_to_thumbnail_image_X.jpg는 썸네일 이미지의 경로를 각각 작성합니다. 필요에 따라서 추가 이미지를 마크업에 추가할 수도 있습니다.
3. JavaScript 초기화
이미지 갤러리를 사용할 페이지에서 JavaScript를 사용하여 PhotoSwipe를 초기화해야 합니다. 다음과 같이 작성해보겠습니다.
<script>
var initPhotoSwipeFromDOM = function(gallerySelector) {
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes;
// thumbElements를 사용하여 이미지 정보 파싱
// ...
return items;
};
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
var pswpElement = document.querySelectorAll('.pswp')[0];
// PhotoSwipe 객체 생성 및 옵션 설정
// ...
gallery.init();
};
var galleryElements = document.querySelectorAll(gallerySelector);
for (var i = 0, l = galleryElements.length; i < l; i++) {
galleryElements[i].setAttribute('data-pswp-uid', i + 1);
galleryElements[i].onclick = function(e) {
e.preventDefault();
var index = parseInt(this.getAttribute('data-pswp-uid')) - 1;
openPhotoSwipe(index, this);
};
}
};
// 이미지 갤러리의 클래스 이름을 전달하여 PhotoSwipe 초기화
initPhotoSwipeFromDOM('.my-gallery');
</script>
initPhotoSwipeFromDOM 함수에서 parseThumbnailElements 함수를 사용하여 이미지 정보를 파싱하고, openPhotoSwipe 함수를 사용하여 PhotoSwipe 객체를 생성하고 옵션을 설정합니다.
마지막으로, JavaScript 코드에서 initPhotoSwipeFromDOM('.my-gallery');를 호출하여 my-gallery 클래스를 가진 이미지들을 갤러리로 변환합니다.
4. PhotoSwipe 스타일링
PhotoSwipe에 기본으로 제공되는 스타일은 photoswipe.css 파일에 정의되어 있으며, 추가적인 스타일링이 필요하다면 이 파일을 수정하거나, 웹 페이지에서 커스텀 CSS를 작성하여 스타일을 적용할 수 있습니다.
<link rel="stylesheet" href="photoswipe.css">
<!-- 기타 스타일 시트 -->
결론
이상으로 PhotoSwipe를 사용하여 이미지 사이즈 조절 기능을 구현하는 방법에 대해 알아보았습니다. PhotoSwipe는 간편하게 사용할 수 있는 이미지 갤러리 라이브러리이며, 필요에 따라 커스마이징하여 웹 페이지에 효과적으로 적용할 수 있습니다.