[javascript] PhotoSwipe의 다양한 활용 방법

22 Nov 2023

javascript

PhotoSwipe은 모바일 장치에서 사용하기 적합한 이미지 및 갤러리 뷰어입니다. 다양한 활용 방법을 소개하겠습니다.

1. 기본 이미지 뷰어

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: 600
    },
    // 여러 개의 이미지를 추가할 수 있습니다.
];

var options = {
    index: 0 // 시작 인덱스
};

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

gallery.init();

위의 코드에서 .pswp는 PhotoSwipe를 렌더링할 HTML 요소입니다. items 배열에는 이미지의 소스 경로와 크기를 설정합니다. options 객체에는 시작 인덱스 등의 설정을 할 수 있습니다. 마지막으로 gallery.init()을 호출하여 PhotoSwipe을 초기화합니다.

2. 이미지 갤러리

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: 600
    },
    // 여러 개의 이미지를 추가할 수 있습니다.
];

var options = {
    index: 0 // 시작 인덱스
};

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

// 이벤트 핸들러를 사용하여 이미지 갤러리 열기
document.getElementById('open-gallery-button').addEventListener('click', function() {
    gallery.init();
});

위의 코드에서 .pswp는 역시 PhotoSwipe를 렌더링할 HTML 요소입니다. items 배열에는 이미지의 소스 경로와 크기를 설정합니다. options 객체에는 시작 인덱스 등의 설정을 할 수 있습니다. 마지막으로, 이벤트 핸들러를 사용하여 원하는 버튼을 클릭하면 이미지 갤러리가 열리도록 할 수 있습니다.

3. 추가 Customization

PhotoSwipe은 다양한 customization 옵션을 제공합니다. 예를 들어, 이미지에 캡션을 추가하고 싶다면 아래와 같이 코드를 수정할 수 있습니다.

var items = [
    {
        src: 'path/to/image1.jpg',
        w: 1200,
        h: 800,
        title: 'Image 1' // 캡션 추가
    },
    {
        src: 'path/to/image2.jpg',
        w: 800,
        h: 600,
        title: 'Image 2' // 캡션 추가
    },
    // 추가적인 이미지 설정
];

위의 코드에서 title 속성을 사용하여 이미지에 캡션을 추가합니다. 이외에도 PhotoSwipe은 다양한 customization 옵션을 제공하므로 필요에 따라 해당 옵션을 설정할 수 있습니다.

PhotoSwipe에 대한 자세한 사용 방법 및 API 문서를 확인하려면 공식 문서를 참고하세요.

PhotoSwipe을 사용하여 다양한 활용 방법을 구현해보세요!