[javascript] PhotoSwipe를 이용한 이미지 스와이프 제스처 예제

22 Nov 2023

javascript

이 예제는 PhotoSwipe라는 자바스크립트 라이브러리를 사용하여 이미지 갤러리를 만들고 스와이프 제스처로 이미지를 넘길 수 있는 기능을 구현하는 방법을 소개합니다.

1. PhotoSwipe 설치

PhotoSwipe은 공식 웹사이트에서 다운로드할 수 있습니다. 다운로드한 파일을 프로젝트의 적절한 폴더에 추가합니다. 예를 들어, photoswipe 폴더 안에 photoswipe.js와 photoswipe.css 파일을 추가합니다.

2. HTML 구조 작성

먼저, 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>

<div class="gallery">
    <a href="image1.jpg">
        <img src="thumbnail1.jpg" alt="Image 1">
    </a>
    <a href="image2.jpg">
        <img src="thumbnail2.jpg" alt="Image 2">
    </a>
    <a href="image3.jpg">
        <img src="thumbnail3.jpg" alt="Image 3">
    </a>
</div>

갤러리에 사용할 이미지를 <a> 태그로 감싸고, href 속성에 원본 이미지의 경로를 지정하고, src 속성에 썸네일 이미지의 경로를 지정합니다.

3. JavaScript 코드 작성

다음으로, 자바스크립트 코드를 작성하여 PhotoSwipe 라이브러리를 초기화하고 이미지 스와이프 기능을 구현합니다.

// PhotoSwipe 라이브러리 가져오기
import PhotoSwipe from 'photoswipe';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';

// 갤러리 요소 선택
const galleryElement = document.querySelector('.gallery');

// 이미지 클릭 이벤트 핸들러
galleryElement.addEventListener('click', function (event) {
    event.preventDefault();

    // 이미지 정보 가져오기
    const images = [];
    const galleryItems = galleryElement.getElementsByTagName('a');
    for (let i = 0; i < galleryItems.length; i++) {
        const anchor = galleryItems[i];
        const src = anchor.getAttribute('href');
        const title = anchor.getAttribute('alt');
        images.push({ src, title });
    }

    // PhotoSwipe 열기
    const pswpElement = document.querySelectorAll('.pswp')[0];
    const options = {
        index: Array.from(galleryItems).indexOf(event.target.parentNode),
        bgOpacity: 0.85,
        history: false,
        shareButtons: [{ id: 'download', label: 'Download Image', url: '{{raw_image_url}}', download: true }]
    };

    const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, images, options);
    gallery.init();
});

위의 코드는 ES6 문법을 사용하여 PhotoSwipe 라이브러리를 가져오고, 갤러리 요소를 선택하고, 이미지를 클릭할 때마다 해당 이미지를 기준으로 PhotoSwipe를 초기화하는 코드입니다.

4. 스타일링

마지막으로, 스타일 시트를 추가하여 이미지 갤러리를 원하는 대로 스타일링할 수 있습니다.

.pswp {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.pswp__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
}

.pswp__scroll-wrap {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

/* 나머지 스타일은 생략합니다 */

위의 코드는 .pswp 클래스의 스타일을 설정하여 갤러리의 배경색, 위치 등을 지정하는 예시입니다.

결론

PhotoSwipe를 사용하면 이미지 스와이프 제스처 기능을 간단하게 구현할 수 있습니다. 이를 통해 사용자들은 이미지 갤러리를 더 편리하게 탐색할 수 있습니다. 추가적인 설정과 스타일링을 통해 독특한 갤러리를 만들 수도 있습니다. PhotoSwipe의 공식 문서에서 더 많은 옵션과 사용 방법을 찾아보세요.