Colin's Blog
[javascript] PhotoSwipe를 이용한 이미지 블러 효과 구현 방법

이번 포스트에서는 PhotoSwipe 라이브러리를 사용하여 이미지 블러 효과를 구현하는 방법을 알아보겠습니다. PhotoSwipe는 반응형 이미지 갤러리 라이브러리로, JavaScript로 구현되어 있습니다. 이미지 블러 효과는 이미지를 모달 형태로 표시하고, 배경을 블러 처리하여 강조하는 효과입니다.

PhotoSwipe 설치하기

먼저 PhotoSwipe를 설치해야 합니다. 다음 명령을 사용하여 npm으로 라이브러리를 설치할 수 있습니다.

npm install photoswipe

또는, CDN 링크를 사용하여 스크립트를 추가할 수도 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>

이미지 표시 및 블러 효과 적용하기

PhotoSwipe를 사용하여 이미지를 표시하고 블러 효과를 적용하는 방법은 다음과 같습니다.

  1. 이미지를 클릭하면 PhotoSwipe 갤러리가 열리도록 이벤트 핸들러를 추가합니다.
  2. 클릭한 이미지를 기준으로 PhotoSwipe에 이미지 정보를 추가합니다.
  3. 갤러리에 표시될 이미지들을 배열로 생성합니다.
  4. PhotoSwipe를 초기화하고 갤러리를 열어줍니다.
  5. 배경을 블러 처리하는 CSS를 적용합니다.

아래는 간단한 예시 코드입니다.

// 1. 이미지 클릭 이벤트 핸들러 추가
const images = document.querySelectorAll('.image');
images.forEach(image => {
    image.addEventListener("click", onImageClick);
});

// 2. 클릭한 이미지를 PhotoSwipe에 추가
function onImageClick(event) {
    event.preventDefault();
    const target = event.currentTarget;
    const items = [];

    items.push({
        src: target.href,
        title: target.getAttribute('data-title')
    });

    // 3. 갤러리에 표시될 이미지들 배열 생성
    const gallery = new PhotoSwipe(document.querySelector('.pswp'), PhotoSwipeUI_Default, items, { index: 0 });

    // 4. PhotoSwipe 초기화 및 갤러리 열기
    gallery.init();

    // 5. 배경 블러 처리 CSS 적용
    document.querySelector('.pswp').classList.add('blur');
}

CSS 스타일링

블러 효과를 구현하기 위해 CSS 스타일을 추가해야 합니다. 아래는 간단한 예시 코드입니다.

.pswp.blur {
    filter: blur(5px);
}

이렇게 하면 이미지 클릭 시 PhotoSwipe 갤러리가 열리고, 배경이 블러 처리되는 효과를 구현할 수 있습니다. PhotoSwipe 라이브러리에는 많은 커스텀화 옵션이 있으니 필요에 따라 설정해보세요.

PhotoSwipe 공식 문서(https://photoswipe.com/documentation/getting-started.html)를 참고하여 더 자세한 내용을 확인할 수 있습니다.

참고 자료:

© 2018 Colin. All rights reserved.