[javascript] PhotoSwipe를 이용한 이미지 동영상 플레이어 구현 방법

22 Nov 2023

javascript

PhotoSwipe는 반응형 웹에서 이미지와 동영상을 간편하게 플레이할 수 있도록 도와주는 JavaScript 라이브러리입니다. 이 블로그 포스트에서는 PhotoSwipe를 사용하여 이미지와 동영상을 플레이할 수 있는 플레이어를 구현하는 방법에 대해 소개하겠습니다.

PhotoSwipe 설치

PhotoSwipe를 사용하기 위해 먼저 다음과 같이 PhotoSwipe의 라이브러리 파일을 다운로드하고 웹 페이지에 포함시켜야 합니다.

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/photoswipe.css">
    <link rel="stylesheet" href="path/to/default-skin.css">
</head>
<body>
    ...
    <script src="path/to/photoswipe.min.js"></script>
    <script src="path/to/photoswipe-ui-default.min.js"></script>
</body>
</html>

위의 코드에서 photoswipe.min.js 파일과 photoswipe-ui-default.min.js 파일은 PhotoSwipe의 JavaScript 파일이며, photoswipe.css와 default-skin.css 파일은 스타일시트 파일입니다.

플레이어 구현

이제 PhotoSwipe를 사용하여 이미지와 동영상을 플레이할 수 있는 플레이어를 구현해보겠습니다. 우선, HTML 코드에서 이미지와 동영상을 감싸는 요소로 figure 태그를 사용합니다.

<figure>
    <a href="path/to/image.jpg">
        <img src="path/to/thumb.jpg" alt="Image">
    </a>
    <figcaption>Image Caption</figcaption>
</figure>

<figure>
    <a href="path/to/video.mp4" data-size="640x360">
        <img src="path/to/video-thumbnail.jpg" alt="Video">
    </a>
    <figcaption>Video Caption</figcaption>
</figure>

위의 코드에서 href 속성은 이미지 또는 동영상 파일의 경로를 설정하고, data-size 속성은 동영상 파일의 크기를 설정합니다. 또한, img 태그에는 썸네일 이미지를 설정하고 캡션을 figcaption 태그로 정의합니다.

다음으로, JavaScript 코드에서 PhotoSwipe를 초기화하고 플레이어를 활성화합니다.

var gallery = new PhotoSwipe( document.querySelector('.pswp'), PhotoSwipeUI_Default, slides, options);
gallery.init();

위의 코드에서 slides는 이미지와 동영상을 담은 배열입니다. 각 슬라이드는 다음과 같은 형식을 따릅니다.

var slides = [
    {
        src: 'path/to/image.jpg',
        w: 1200,
        h: 800
    },
    {
        html: '<video src="path/to/video.mp4" autoplay controls>',
        w: 640,
        h: 360
    }
];

위의 코드에서 src 속성은 이미지 또는 동영상 파일의 경로를 설정하고, w와 h 속성은 이미지 또는 동영상 파일의 크기를 설정합니다. 동영상을 플레이하기 위해 html 속성에 비디오 태그를 포함시킬 수도 있습니다.

결론

이제 PhotoSwipe를 이용하여 이미지와 동영상 플레이어를 구현하는 방법에 대해 알아보았습니다. PhotoSwipe를 사용하면 사용자들은 반응형 웹에서 간편하게 이미지와 동영상을 플레이할 수 있으며, 플레이어를 커스터마이징하여 웹 페이지에 맞게 디자인할 수도 있습니다.

더 자세한 내용은 PhotoSwipe 공식 문서를 참조하시기 바랍니다.