[javascript] PhotoSwipe를 이용한 이미지 필터링 기능 구현 방법

22 Nov 2023

javascript

이미지 필터링 기능은 웹사이트나 앱에서 사용자가 이미지를 필터링하여 특정 조건에 맞는 이미지만 선택적으로 표시할 수 있는 기능입니다. 이번 글에서는 PhotoSwipe라는 자바스크립트 라이브러리를 사용하여 이미지 필터링 기능을 구현하는 방법에 대해 알아보겠습니다.

PhotoSwipe란?

PhotoSwipe는 모바일 및 데스크톱에서 터치 기반의 이미지 갤러리를 제공하는 자바스크립트 라이브러리입니다. 이미지를 확대, 축소, 드래그 등의 제스처로 조작할 수 있으며, 다양한 이미지 필터링 옵션을 제공합니다.

필요한 준비물

PhotoSwipe 라이브러리 파일
필터링할 이미지 데이터

이미지 데이터 구조

필터링할 이미지 데이터는 JavaScript 객체의 배열로 구성됩니다. 각 이미지 객체는 src (이미지 URL), title (이미지 제목), category (이미지 카테고리) 등의 속성을 가질 수 있습니다.

var images = [
  {
    src: "image1.jpg",
    title: "Image 1",
    category: "nature"
  },
  {
    src: "image2.jpg",
    title: "Image 2",
    category: "people"
  },
  //...
];

필터링 기능 구현

필터링할 카테고리 목록 생성하기

function createCategoryList() {
  var categories = [];
   
  // 이미지 데이터에서 카테고리 목록 추출
  images.forEach(function(image) {
    if (!categories.includes(image.category)) {
      categories.push(image.category);
    }
  });
   
  // 카테고리 목록을 선택할 수 있는 UI 요소 생성
  var filterList = document.getElementById("filter-list");
  categories.forEach(function(category) {
    var option = document.createElement("option");
    option.value = category;
    option.text = category;
    filterList.appendChild(option);
  });
}
   
createCategoryList();

이미지 필터링 적용하기

function applyImageFilter(category) {
  // 원본 이미지 목록을 PhotoSwipe에 추가
  var filteredImages = images.filter(function(image) {
    return image.category === category;
  });
   
  var pswpElement = document.querySelectorAll(".pswp")[0];
  var photoSwipe = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, filteredImages, {
    index: 0
  });
  photoSwipe.init();
}

필터링 기능과 연동하기

var filterList = document.getElementById("filter-list");
   
filterList.addEventListener("change", function() {
  var selectedCategory = filterList.value;
  applyImageFilter(selectedCategory);
});

마무리

PhotoSwipe를 이용하여 이미지 필터링 기능을 구현하는 방법에 대해 알아보았습니다. 필터링할 이미지 데이터를 구성하고, 필터링을 적용할 UI 요소를 생성한 후, 필터링 기능과 연동하여 원하는 이미지만 화면에 표시할 수 있습니다. PhotoSwipe 라이브러리의 다양한 옵션과 기능을 활용하여 사용자 친화적인 이미지 갤러리를 구현해보세요.

참고 자료: