[javascript] PhotoSwipe를 이용한 이미지 스케일 및 회전 제어 방법

22 Nov 2023

javascript

이미지 갤러리를 만들기 위해 PhotoSwipe 라이브러리를 사용하는 경우, 이미지의 스케일을 조절하거나 회전하는 제어 기능을 추가할 수 있습니다. 이번 블로그 포스트에서는 PhotoSwipe를 이용하여 이미지를 스케일 및 회전하는 방법에 대해 알아보겠습니다.

1. PhotoSwipe 설치 및 초기화

먼저, PhotoSwipe를 프로젝트에 설치해야 합니다. npm을 이용하여 설치할 수 있습니다.

npm install photoswipe
npm install photoswipe/dist/photoswipe-ui-default

PhotoSwipe를 초기화하기 위해 필요한 기본적인 코드는 다음과 같습니다.

var pswpElement = document.querySelectorAll('.pswp')[0];
var items = [
    {
        src: 'path/to/image1.jpg',
        w: 1200,
        h: 800
    },
    {
        src: 'path/to/image2.jpg',
        w: 800,
        h: 1200
    },
    // 추가적인 이미지들을 객체 형태로 추가할 수 있습니다.
];

var options = {
    // 설정 옵션들을 추가할 수 있습니다.
};

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

위 코드에서 pswpElement는 PhotoSwipe를 래핑할 HTML 요소를 찾는 변수입니다. items는 이미지의 경로와 크기를 담은 객체들의 배열입니다. options는 PhotoSwipe의 추가 설정 옵션을 담고 있습니다.

2. 이미지 스케일 및 회전 추가하기

이미지 스케일 조절

이미지 스케일을 조절하기 위해서는 Item 객체에 w와 h 속성을 추가하여 이미지의 원본 크기를 지정해야 합니다. 예를 들어, 원하는 이미지의 가로크기를 500px로 조절하고 싶다면 다음과 같이 Item 객체를 생성합니다.

{
    src: 'path/to/image.jpg',
    w: 500,
    h: 0
}

여기서 h 속성은 0으로 설정하여 원본 이미지의 세로크기에 맞게 자동 조정되도록 합니다.

이미지 회전 제어

이미지 회전을 제어하기 위해서는 PhotoSwipe의 afterChange 이벤트를 사용합니다. afterChange 이벤트는 이미지 변경이 완료된 후에 발생합니다. 코드에서 afterChange 이벤트를 처리하는 부분을 추가합니다.

gallery.listen('afterChange', function() {
    var currentSlide = gallery.currItem;
    // 현재 슬라이드의 이미지 요소를 가져옵니다.
    var image = currentSlide.container.children[0];
    
    // 이미지를 회전시키는 코드를 작성합니다.
    image.style.transform = 'rotate(90deg)';
});

위 코드에서는 현재 슬라이드의 이미지 요소를 가져와서 rotate CSS 속성을 사용하여 이미지를 90도 회전시킵니다.

결론

이번 포스트에서는 PhotoSwipe를 이용하여 이미지 스케일 및 회전을 제어하는 방법에 대해 알아보았습니다. PhotoSwipe를 이용하면 간편하게 이미지 갤러리를 만들 수 있으며, 추가적인 제어 기능을 통해 사용자에게 더욱 편리한 환경을 제공할 수 있습니다. PhotoSwipe의 공식 문서를 참고하여 더 다양한 기능을 알아보세요.

참고 자료

PhotoSwipe 공식 문서: https://photoswipe.com/documentation/getting-started.html
PhotoSwipe GitHub 저장소: https://github.com/dimsemenov/photoswipe