[javascript] PhotoSwipe를 이용한 이미지 핀터링 및 정렬 구현 방법

22 Nov 2023

javascript

개요

PhotoSwipe는 웹 사이트에서 이미지 갤러리를 구현할 때 자주 사용되는 자바스크립트 라이브러리입니다. 이 글에서는 PhotoSwipe를 사용하여 이미지 필터링과 정렬을 구현하는 방법에 대해 알아보겠습니다.

PhotoSwipe 설치 및 설정

PhotoSwipe를 사용하려면 먼저 필요한 파일들을 다운로드 받아야 합니다. 이를 위해 PhotoSwipe의 공식 웹사이트에 접속하여 최신 버전을 다운로드 받을 수 있습니다. 다운로드 후, 필요한 CSS와 JavaScript 파일을 웹 페이지에 추가합니다.

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="/path/to/photoswipe.css">
    <link rel="stylesheet" href="/path/to/default-skin/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>

이미지 필터링 구현하기

이미지 필터링을 구현하기 위해서는 이미지를 분류할 수 있는 기준을 정해야 합니다. 예를 들어, 이미지의 카테고리 별로 필터링할 수 있다면 유용할 것입니다. 이를 위해 데이터 속성(data attribute)을 사용하여 이미지의 카테고리 정보를 지정할 수 있습니다.

<div id="gallery">
    <figure class="image" data-category="nature">
        <img src="/path/to/image1.jpg" alt="Image 1">
    </figure>
    <figure class="image" data-category="animals">
        <img src="/path/to/image2.jpg" alt="Image 2">
    </figure>
    <figure class="image" data-category="nature">
        <img src="/path/to/image3.jpg" alt="Image 3">
    </figure>
    <figure class="image" data-category="people">
        <img src="/path/to/image4.jpg" alt="Image 4">
    </figure>
    ...
</div>

위의 예시에서는 data-category 속성을 사용하여 이미지의 카테고리 정보를 지정했습니다. 이제 필터링 기능을 추가하려면 다음과 같이 스크립트를 작성합니다.

var pswpElement = document.querySelectorAll('.image');
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default);

var filters = document.querySelectorAll('.filter');
filters.forEach(function(filter) {
    filter.addEventListener('click', function() {
        var category = this.getAttribute('data-category');
        var images = document.querySelectorAll('[data-category="' + category + '"]');
        gallery.items = Array.from(images).map(function(image) {
            return {
                src: image.querySelector('img').getAttribute('src'),
                w: 1200,
                h: 800
            };
        });
        gallery.init();
    });
});

위의 스크립트에서는 필터링을 할 때 클릭 이벤트를 통해 해당 카테고리에 해당하는 이미지들을 가져옵니다. 그리고 gallery.items 속성을 업데이트 하고, gallery.init() 함수를 호출하여 갤러리를 업데이트합니다.

이미지 정렬 구현하기

이미지 정렬은 CSS를 사용하여 구현할 수 있습니다. 예를 들어, display: inline-block 속성을 사용하여 이미지들을 가로로 나열할 수 있습니다.

#gallery {
    display: flex;
    flex-wrap: wrap;
}

.image {
    width: 200px;
    height: 200px;
    margin: 10px;
}

위의 예시에서는 #gallery 요소를 display: flex로 설정하여 이미지들을 가로로 나열하도록 했습니다.

결론

이상으로, PhotoSwipe를 사용하여 이미지 필터링과 정렬 기능을 구현하는 방법에 대해 알아보았습니다. PhotoSwipe는 강력하고 유연한 이미지 갤러리 라이브러리이며, 다양한 활용 방법을 통해 웹 사이트의 사용자 경험을 향상시킬 수 있습니다.

개요

PhotoSwipe 설치 및 설정

이미지 필터링 구현하기

이미지 정렬 구현하기

결론

참고 자료