photoswipe 2

photoswipe back button click close()

photoswipe 를 갤러리로 사용할때, 팝업화면에서 x 버튼을 클릭하나 터치 다운/업을 통해서 photoswipe 창을 닫을수 있습니다. (애니메이션 효과가 추가되어 아주 자연스럽게 처리가 되죠) 모바일인 경우 백버튼을 클릭하는 경우에도 photoswipe가 닫히도록 하면, 조금더 사용자가 편리할것 같아 적용하였습니다. photoswipe 에서 백버튼 관련된 기본 기능은 제공해주지 않고 있고, 현재 swiperjs + photoswipe 형태로 사용중이라서 동작하는 코드를 찾는데 시간이 좀 걸렸습니다. (프론트 분들은 금방 처리할것 같은데, jquery 수준으로 자바스크립트를 다루는 저는 좀 어려웠습니다.) 대략적인 코드는 다음과 같습니다. $(document).ready(function () { c..

2023.08.19

photoswipe thumbnail to original image aspect ratio 문제

photoswipe로 이미지를 표시할때, 썸네일 이미지와 원본 이미지 비율이 틀린 경우에 문제가 눈에 거슬리는 문제가 있습니다. 비율이 동일한 경우(보통 동일하게 맞추지만)나, 썸네일 to 썸네일 이미지를 표시할때는 자연스럽게 화면이 전환됩니다. 문제는 썸네일보다 원본의 가로 비율이 더 높은 경우인데, 전환시 마지막에 원본 이미지로 표시되도록 썸네일을 지우는데, 이 처리가 진행될때, 하단 이미지가 잘려나가는듯한 느낌으로 잠시 표시됩니다. (말로는 설명하기 어렵고 나중에 문제되는 화면을 동영상이나 gif 를 업로드 해야 겠네요.) photoswipe 옵션값을 조정하여 처리가 가능한지 찾아봤지만, 원하는 걸 찾지 못했습니다. 해외 게시글이나, github 이슈를 봐도 동일한 문제를 겪은 사람은 있는것 같은데..

2023.08.19