PhotoSwipe는 사용자가 웹 사이트에서 이미지 갤러리를 열고 탐색할 수 있도록 해주는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 이미지를 확대, 축소하고 터치 제스처를 사용하여 탐색할 수 있습니다. 이번 포스트에서는 PhotoSwipe의 기본 기능에 대해 알아보겠습니다.
설치
PhotoSwipe를 사용하기 위해서는 먼저 해당 라이브러리를 웹 프로젝트에 포함시켜야 합니다. 프로젝트에는 photoswipe.css, default-skin.css, photoswipe.min.js, photoswipe-ui-default.min.js 파일이 필요합니다. 이 파일들은 PhotoSwipe의 공식 홈페이지에서 다운로드할 수 있습니다.
HTML 구조
PhotoSwipe는 하나 이상의 이미지를 감싸고 있는 HTML 구조가 필요합니다. 보통은 <div> 태그를 사용하여 이미지를 감싸는 것이 일반적입니다. 각 이미지는 <a> 태그를 사용하여 다른 이미지와 구분하고 속성을 지정합니다.
<div id="gallery">
<a href="image1.jpg">
<img src="thumb1.jpg" alt="Image 1">
</a>
<a href="image2.jpg">
<img src="thumb2.jpg" alt="Image 2">
</a>
...
</div>
JavaScript 초기화
PhotoSwipe를 사용하기 위해선 JavaScript 초기화가 필요합니다. 초기화 코드는 웹 페이지의 <script> 태그 내에 작성합니다. PhotoSwipe 객체는 PhotoSwipe() 생성자를 사용하여 생성하고, 생성자에는 옵션 객체를 전달할 수 있습니다.
var gallery = new PhotoSwipe(document.getElementById('gallery'), PhotoSwipeUI_Default, items, options);
gallery.init();
위의 코드에서 items는 이미지들의 배열이며, 각 이미지는 다음과 같은 형식을 따릅니다.
var items = [
{
src: 'image1.jpg',
w: 1200,
h: 800
},
{
src: 'image2.jpg',
w: 800,
h: 1200
},
...
];
options 객체를 사용하여 PhotoSwipe의 동작을 구성할 수 있습니다. 여기에는 확대/축소 애니메이션, 이미지 표시 영역 크기, 인터랙션 제어 등 다양한 옵션을 지정할 수 있습니다.
결과 확인
위의 준비 작업을 완료한 후 웹 페이지를 실행하면 이미지 갤러리가 정상적으로 표시되고, 사용자는 이미지를 확대, 축소하고 터치 제스처를 사용하여 탐색할 수 있게 됩니다. PhotoSwipe는 갤러리 내의 다음/이전 이미지로 이동하거나 이미지를 닫는 등의 기능을 제공합니다.
PhotoSwipe의 기본 기능을 이용하여 이미지 갤러리를 만들고 최적의 사용자 경험을 제공해보세요!