[javascript] PhotoSwipe와 연동하여 이미지 흑백 필터링 구현하기

22 Nov 2023

javascript

먼저, HTML 파일에 다음과 같이 필터링할 이미지를 포함시키고, 필터를 적용할 버튼을 추가해줍니다.

<div id="my-gallery" 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>
        <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>

<button id="apply-filter-btn">Apply Filter</button>

그리고 아래와 같이 CSS 스타일을 추가해줍니다.

.my-gallery img {
    max-width: 100%;
    height: auto;
}

.filter-applied {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

이제 JavaScript 코드에서 필터를 적용하는 함수를 작성해봅시다.

window.addEventListener('DOMContentLoaded', function() {
    var galleryElem = document.getElementById('my-gallery');
    var applyFilterBtn = document.getElementById('apply-filter-btn');

    // PhotoSwipe 초기화
    var gallery = new PhotoSwipe(galleryElem, PhotoSwipeUI_Default, items, options);

    // 필터 적용 버튼 클릭 이벤트 핸들러
    applyFilterBtn.addEventListener('click', function() {
        // 각 이미지에 필터 클래스 추가
        var images = galleryElem.querySelectorAll('.pswp__item img');
        for (var i = 0; i < images.length; i++) {
            images[i].classList.add('filter-applied');
        }
    });

    // 이미지 클릭 시 갤러리 열기
    gallery.init();
});

위의 코드에서 applyFilterBtn 클릭 이벤트 핸들러에서는 선택한 이미지에 필터를 적용하기 위해 filter-applied 클래스를 추가해주었습니다. CSS에서 filter-applied 클래스는 이미지를 흑백으로 필터링하는 스타일을 정의하고 있습니다.

이제 필터를 적용할 버튼을 클릭하면 이미지가 흑백으로 변하는 것을 확인할 수 있습니다. PhotoSwipe를 사용하여 이미지 필터링을 구현하는 방법을 살펴보았습니다. 자세한 내용은 PhotoSwipe 문서를 참조하시기 바랍니다.

참고 자료:

PhotoSwipe 공식 문서