photoswipe back button click close()

photoswipe 를 갤러리로 사용할때, 팝업화면에서 x 버튼을 클릭하나 터치 다운/업을 통해서 photoswipe 창을 닫을수 있습니다.

(애니메이션 효과가 추가되어 아주 자연스럽게 처리가 되죠)

 

모바일인 경우 백버튼을 클릭하는 경우에도 photoswipe가 닫히도록 하면, 조금더 사용자가 편리할것 같아 적용하였습니다.

photoswipe 에서 백버튼 관련된 기본 기능은 제공해주지 않고 있고,

현재 swiperjs + photoswipe  형태로 사용중이라서 동작하는 코드를 찾는데 시간이 좀 걸렸습니다.

(프론트 분들은 금방 처리할것 같은데, jquery 수준으로 자바스크립트를 다루는 저는 좀 어려웠습니다.)

 

대략적인 코드는 다음과 같습니다.

 

$(document).ready(function () {
    const photo_swipe_options = {
        //....
    };

    const lightbox = new PhotoSwipeLightbox(photo_swipe_options);
    
    lightbox.on('afterInit', () => {
        const {pswp} = lightbox;

        console.log('afterInit');
        if (history.state) {
            // from popstate event
            history.replaceState({pswp_index: lightbox.index}, '');
        } else {
            history.pushState({pswp_index: lightbox.index}, '');
        }
    });

    lightbox.init();

    window.addEventListener('popstate', () => {
        const {pswp} = lightbox;
        if (typeof pswp === "object" && pswp && pswp.isOpen) {
            history.pushState({pswp: true, path: window.location.pathname}, null, window.location.pathname);
            pswp.close()
        } else {
            history.go(-1)
        }
    });
});

 

history 관련하여 이벤트별로 코드를 좀더 추가해야 할것 같은데, 현재 코드로도 잘동작하여 이 상태로 적용하였습니다.