[javascript] PhotoSwipe를 이용한 이미지 슬라이드 효과 설명

22 Nov 2023

javascript

PhotoSwipe는 모바일 및 데스크탑에서 사용할 수 있는 JavaScript 기반의 이미지 슬라이드 및 갤러리 라이브러리입니다. 사용자 친화적인 UI와 매우 부드러운 애니메이션으로 이미지를 즐길 수 있는 환상적인 효과를 제공합니다.

PhotoSwipe 설치하기

PhotoSwipe를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install photoswipe

또는 다운로드할 수도 있습니다. PhotoSwipe 다운로드 페이지에서 최신 버전의 파일을 다운로드 받아 사용할 수 있습니다.

PhotoSwipe 사용 예제

PhotoSwipe를 사용하여 간단한 이미지 슬라이드 효과를 만들어보겠습니다. 먼저, HTML 파일을 생성하고 이미지를 표시할 엘리먼트를 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="photoswipe/photoswipe.css">
    <link rel="stylesheet" href="photoswipe/default-skin/default-skin.css">
</head>
<body>
    <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"></button>
                <button class="pswp__button pswp__button--arrow--right" title="Next"></button>
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

다음으로, JavaScript 파일을 생성하고 PhotoSwipe를 초기화하고 이미지를 추가하는 코드를 작성합니다.

import { PhotoSwipe, PhotoSwipeUI_Default } from 'photoswipe';
import 'photoswipe/dist/photoswipe.css';
import 'photoswipe/dist/default-skin/default-skin.css';

(() => {
    const pswpElement = document.querySelectorAll('.pswp')[0];

    // 이미지 정보를 저장할 배열
    const items = [
        {
            src: 'images/img1.jpg',
            w: 1200,
            h: 800
        },
        {
            src: 'images/img2.jpg',
            w: 1200,
            h: 800
        },
        {
            src: 'images/img3.jpg',
            w: 1200,
            h: 800
        }
    ];

    // 이미지를 클릭하면 PhotoSwipe를 열도록 이벤트 핸들러 등록
    document.querySelectorAll('.pswp__container .pswp__item').forEach((item, index) => {
        item.addEventListener('click', (e) => {
            e.preventDefault();
            openPhotoSwipe(index);
        });
    });

    // PhotoSwipe 초기화
    const openPhotoSwipe = (index) => {
        const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, { index });
        gallery.init();
    };
})();

위의 코드에서는 .pswp__container 클래스를 가진 엘리먼트가 이미지를 포함하는 엘리먼트로 가정하고, 각 이미지를 클릭하면 해당 인덱스의 이미지가 확대되는 효과를 볼 수 있습니다.

결론

PhotoSwipe는 매우 강력한 이미지 슬라이드 및 갤러리 라이브러리로, 사용자에게 탁월한 이미지 탐색 경험을 제공합니다. PhotoSwipe를 사용하여 웹 사이트나 앱에 멋진 이미지 슬라이드 효과를 구현해보세요.

PhotoSwipe 설치하기

PhotoSwipe 사용 예제

결론

참고 자료