이미지 갤러리를 생성하고 관리하는 데 사용되는 PhotoSwipe는 HTML, CSS 및 JavaScript로 작성된 간단하면서도 강력한 이미지 뷰어입니다. 이번 블로그 포스트에서는 PhotoSwipe와 함께 이미지에 컬러 필터를 적용하는 방법을 알아보겠습니다.

PhotoSwipe 설치

먼저, PhotoSwipe를 사용하기 위해 해당 라이브러리를 설치해야 합니다. 아래의 명령어를 사용하여 PhotoSwipe를 설치합니다.

npm install photoswipe

PhotoSwipe 갤러리 생성

PhotoSwipe를 사용하여 이미지 갤러리를 생성하는 방법을 알아보겠습니다.

1. HTML 파일 내에 이미지 갤러리를 표시할 <div> 요소를 추가합니다.

<div class="my-gallery">
    <!-- 이미지가 표시될 곳 -->
</div>

1. JavaScript 파일에서 아래와 같이 갤러리를 초기화합니다.

var myGallery = new PhotoSwipe('.my-gallery', PhotoSwipeUI_Default, items, options);
myGallery.init();

이미지에 컬러 필터 적용하기

이제 이미지에 컬러 필터를 적용하는 방법을 알아보겠습니다.

1. 컬러 필터를 적용할 이미지에 대한 CSS 클래스를 정의합니다.

.my-gallery img {
    filter: grayscale(100%); /* 흑백 필터 적용 */
}

1. JavaScript 파일에서 PhotoSwipe 갤러리를 초기화할 때, afterChange 이벤트 핸들러를 등록하여 이미지 변경 시마다 컬러 필터를 업데이트합니다.

var myGallery = new PhotoSwipe('.my-gallery', PhotoSwipeUI_Default, items, options);
myGallery.init();

myGallery.listen('afterChange', function() {
    var currentImage = myGallery.currItem.container;
    currentImage.style.filter = 'grayscale(100%)'; /* 흑백 필터 적용 */
});

이제 PhotoSwipe 갤러리에서 이미지를 변경할 때마다 각 이미지에 흑백 필터가 적용됩니다.

프로젝트에서 PhotoSwipe를 사용하여 이미지 컬러 필터를 적용하는 방법을 알아보았습니다. PhotoSwipe의 강력한 기능을 활용하여 웹 애플리케이션에 멋진 이미지 갤러리를 추가하세요.

참고: PhotoSwipe 공식 문서