PhotoSwipe를 사용하기 위해 먼저 PhotoSwipe 라이브러리를 다운로드하고 HTML 문서에 포함해야합니다. 그런 다음, 갤러리의 이미지와 링크 요소를 정의해야합니다. 요소에는 이미지의 URL, 썸네일 이미지, 캡션 등에 대한 정보가 포함될 수 있습니다.

다음은 간단한 PhotoSwipe 갤러리의 예입니다.

<div class="my-gallery">
    <!-- 이미지와 썸네일 링크 요소 -->
    <a href="path/to/image1.jpg" data-size="1200x900">
        <img src="path/to/thumbnail1.jpg" alt="Image 1" />
    </a>
    <a href="path/to/image2.jpg" data-size="800x600">
        <img src="path/to/thumbnail2.jpg" alt="Image 2" />
    </a>
    <!-- 추가 이미지와 썸네일 링크 요소 -->
    ...
</div>

다음으로, JavaScript 코드를 작성하여 PhotoSwipe를 초기화해야합니다.

var myGallery = new PhotoSwipe('.my-gallery', PhotoSwipeUI_Default);
myGallery.init();

위 코드에서 .my-gallery는 갤러리 요소의 CSS 클래스 이름입니다. PhotoSwipeUI_Default는 PhotoSwipe의 사용자 인터페이스 스타일을 지정하는 객체입니다.

이제 PhotoSwipe를 통해 터치 제스처 기능을 사용할 수 있게 되었습니다. 사용자는 이미지를 확대하거나 축소하고, 이미지를 드래그하거나 스와이프하여 다른 이미지로 이동할 수 있습니다.

PhotoSwipe에는 다양한 옵션이 있으며, 확대/축소 애니메이션, 터치 제스처 감도, 버튼 스타일 등을 사용자의 요구에 맞게 설정할 수 있습니다. 자세한 내용은 PhotoSwipe 공식 문서를 참조하십시오.

PhotoSwipe는 간단하고 유연한 인터페이스를 제공하여 모바일 장치에서 멋진 이미지 갤러리를 구현하는 데 매우 유용한 도구입니다.