Colin's Blog
[javascript] PhotoSwipe를 이용한 이미지에 표식 또는 라벨 추가하기

PhotoSwipe는 모바일 장치 및 데스크톱에서 사용할 수 있는 JavaScript 기반의 이미지 및 갤러리 라이브러리입니다. 이 라이브러리를 사용하면 이미지를 확대, 축소하고 슬라이드로 이동할 수 있습니다.

이번 블로그에서는 PhotoSwipe를 사용하여 이미지에 표식 또는 라벨을 추가하는 방법을 소개하겠습니다.

1. PhotoSwipe 설치하기

우선, PhotoSwipe를 사용하기 위해 해당 라이브러리를 다운로드하고 프로젝트에 추가해야 합니다. 아래의 명령을 사용하여 PhotoSwipe를 설치할 수 있습니다.

npm install photoswipe --save

2. HTML 구조 설정하기

다음으로, 이미지를 포함하는 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>

3. 이미지 표식 또는 라벨 추가하기

이미지에 표식 또는 라벨을 추가하려면 각 이미지 요소에 CSS 클래스 또는 데이터 속성을 추가해야 합니다. 예를 들어, 이미지에 “label”이라는 라벨을 추가하는 경우 아래와 같이 코드를 작성하세요.

<a href="이미지_경로" data-size="이미지_사이즈" data-med="이미지_중간_사이즈" data-med-size="중간_이미지_사이즈" data-title="라벨_텍스트" class="label">이미지_표시_텍스트</a>

위의 코드에서 “클래스”와 “데이터 속성”은 표식 또는 라벨을 구분하는 역할을 합니다. “data-title”은 표시할 라벨의 텍스트를 지정하는 속성입니다.

4. PhotoSwipe 초기화하기

PhotoSwipe를 사용하여 이미지에 표식 또는 라벨을 추가한 후에는 PhotoSwipe를 초기화해야 합니다. 이를 위해 다음과 같이 JavaScript 코드를 작성하세요.

var pswpElement = document.querySelectorAll('.pswp')[0];
var items = [
    {
        src: '이미지_경로',
        w: 이미지_너비,
        h: 이미지_높이,
        title: '라벨_텍스트'
    },
    // 추가 이미지들...
];

var options = {
    index: 0
};

var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();

위의 코드에서 “items” 배열에는 이미지의 경로, 너비, 높이 및 라벨 텍스트를 포함하여 각 이미지에 대한 정보를 설정합니다. “options” 객체는 갤러리의 초기 상태를 설정하는 데 사용됩니다.

이제 PhotoSwipe를 이용하여 이미지에 표식 또는 라벨을 추가할 수 있습니다. 원하는 대로 스타일링하고 사용자에게 더 많은 정보를 표시할 수 있는 기능을 추가할 수도 있습니다.

참고 자료

[1] PhotoSwipe 공식 문서 [2] PhotoSwipe GitHub 저장소

© 2018 Colin. All rights reserved.