[javascript] PhotoSwipe와 연동하여 이미지 영상 플레이 구현하기

22 Nov 2023

javascript

이미지 갤러리와 영상 플레이어를 함께 사용하고 싶다면, PhotoSwipe라는 라이브러리를 사용할 수 있습니다. PhotoSwipe는 웹 이미지 갤러리를 손쉽게 구현할 수 있는 강력한 도구로, 갤러리 내의 이미지를 자유롭게 확대, 축소, 이동할 수 있습니다.

이 튜토리얼에서는 PhotoSwipe와 연동하여 이미지와 영상을 함께 플레이할 수 있는 방법에 대해 알아보겠습니다.

PhotoSwipe 설치

PhotoSwipe를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드하고, 웹 페이지에 연결해야 합니다.

다음은 npm을 사용하여 PhotoSwipe를 설치하는 방법입니다.

npm install photoswipe

만약 CDN을 사용하고 싶다면, 다음과 같이 연결할 수 있습니다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>

이미지와 영상 플레이 구현하기

이제 PhotoSwipe를 사용하여 이미지와 영상을 함께 플레이할 수 있는 기능을 구현해보겠습니다.

먼저, 이미지와 영상을 감싸는 HTML 요소를 작성합니다.

<div class="my-gallery">
    <figure>
        <a href="/path/to/image.jpg">
            <img src="/path/to/thumbnail.jpg" alt="Image 1">
        </a>
        <figcaption>Caption 1</figcaption>
    </figure>
    <figure>
        <a href="/path/to/video.mp4">
            <img src="/path/to/video-thumbnail.jpg" alt="Video 1">
        </a>
        <figcaption>Caption 2</figcaption>
    </figure>
</div>

여기서 .my-gallery 클래스는 PhotoSwipe에 적용할 갤러리를 지정합니다.

다음으로, JavaScript 코드를 작성하여 PhotoSwipe를 초기화합니다.

var pswpElement = document.querySelectorAll('.my-gallery');
var items = [
    {
        src: '/path/to/image.jpg',
        w: 1200,
        h: 800
    },
    {
        html: '<video class="pswp__video" src="/path/to/video.mp4"></video>',
        w: 640,
        h: 360
    }
];

var options = {
    index: 0
};

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

위 코드에서 items 배열에는 이미지와 영상에 대한 정보를 입력합니다. src는 이미지 또는 영상 파일의 경로를, w와 h는 해당 파일의 너비와 높이를 나타냅니다.

마지막으로, CSS 스타일을 지정하여 영상을 보여주는 영역의 스타일을 설정할 수 있습니다.

.pswp__video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

이제 웹 페이지를 미리보기하면, PhotoSwipe를 사용하여 이미지와 영상을 함께 플레이할 수 있습니다.

결론

PhotoSwipe를 사용하면 이미지와 영상을 함께 플레이하는 기능을 손쉽게 구현할 수 있습니다. 이를테면, 웹 포트폴리오나 상품 세부 페이지 등에서 활용할 수 있습니다. PhotoSwipe의 강력한 기능을 활용하여 사용자에게 멋진 경험을 제공해보세요!

PhotoSwipe 설치

이미지와 영상 플레이 구현하기

결론

참고 자료