[javascript] PhotoSwipe를 이용한 이미지 필터 효과 적용 방법

22 Nov 2023

javascript

이번 블로그 포스트에서는 PhotoSwipe를 사용하여 이미지 필터 효과를 적용하는 방법에 대해 알아보겠습니다.

PhotoSwipe란?

PhotoSwipe는 JavaScript로 작성된 오픈 소스 라이브러리로, 터치 기반의 반응형 이미지 갤러리를 만들 수 있도록 도와줍니다. PhotoSwipe는 다양한 기능을 제공하며, 이미지 확대, 축소, 탐색, 슬라이드 등 다양한 작업을 처리할 수 있습니다.

이미지 필터 효과 적용하기

사전 준비

PhotoSwipe를 사용하기 위해서는 우선 photoswipe.min.js, photoswipe-ui-default.min.js, photoswipe.css, default-skin.css 파일을 다운로드 받아 HTML 문서에 포함해야 합니다. 다운로드 링크는 아래와 같습니다:
- PhotoSwipe 다운로드

HTML 마크업

우선 이미지 갤러리를 표시할 HTML 마크업을 작성합니다. 예를 들어, 갤러리를 나타내는 div 요소를 만들고, 각 이미지에 대한 링크와 썸네일 이미지, 원본 이미지 정보를 포함하는 a 요소를 작성합니다.

<div class="my-gallery">
  <a href="path/to/image-1.jpg">
    <img src="path/to/thumbnail-1.jpg" alt="Image 1">
  </a>
  <a href="path/to/image-2.jpg">
    <img src="path/to/thumbnail-2.jpg" alt="Image 2">
  </a>
  <!-- 추가 이미지 -->
</div>

JavaScript 초기화

마지막으로 JavaScript를 사용하여 PhotoSwipe를 초기화해야 합니다. 아래의 코드를 HTML 문서에 추가합니다:

<script>
var initPhotoSwipeFromDOM = function(gallerySelector) {

    var parseThumbnailElements = function(el) {
        // 썸네일 이미지 정보 추출
    };

    var openPhotoSwipe = function(index, galleryElement) {
        // PhotoSwipe 열기
    };

    var galleryElements = document.querySelectorAll(gallerySelector);

    for(var i = 0, l = galleryElements.length; i < l; i++) {
        galleryElements[i].setAttribute('data-pswp-uid', i+1);
        galleryElements[i].onclick = onThumbnailsClick;
    }

    var onThumbnailsClick = function(e) {
        e.preventDefault();
        var galleryElement = this,
            childNodes = galleryElement.parentNode.childNodes,
            numChildNodes = childNodes.length,
            nodeIndex = 0,
            index;

        for (var i = 0; i < numChildNodes; i++) {
            if (childNodes[i].nodeType !== 1) {
                continue;
            }
            if (childNodes[i] === galleryElement) {
                index = nodeIndex;
                break;
            }
            nodeIndex++;
        }

        if (index >= 0) {
            openPhotoSwipe(index, galleryElement);
        }
        return false;
    };

    var photoswipeParseHash = function() {
        // URL 해시 값 파싱
    };

    initPhotoSwipeFromDOM('.my-gallery');
};
</script>

필터 효과 적용

이제 이미지 갤러리에 필터 효과를 적용해 보겠습니다. 필터링은 CSS로 수행되며, 필터링 컨트롤러를 추가하여 사용자가 원하는 필터를 선택할 수 있도록 합니다. 아래의 코드를 JavaScript 초기화 코드에 추가합니다:
```
<script>
// ...

var applyImageFilter = function(filter) {
    var galleryElement = document.querySelector('.my-gallery'),
        images = galleryElement.getElementsByTagName('img');

    for (var i = 0; i < images.length; i++) {
        images[i].style.filter = filter;
    }
};

document.getElementById('filter-control').addEventListener('change', function(e) {
    applyImageFilter(e.target.value);
});

// ...
</script>
```
이 코드에서는 이미지 필터 효과를 적용하기 위해 applyImageFilter 함수를 정의하고, 필터 컨트롤러의 변경 이벤트를 감지하여 해당 필터를 적용합니다. 필터 컨트롤러는 id가 filter-control인 요소로 가정하며, 원하는 필터를 선택할 수 있는 select 형태로 작성되어야 합니다.
CSS 스타일링

필터 효과를 적용하기 위해서는 필요한 CSS 스타일을 추가해야 합니다. 예를 들어, 아래의 코드를 HTML 문서에 추가합니다:
```
<style>
.my-gallery img {
    width: 100%;
}
</style>
```
이 CSS는 이미지가 갤러리 영역에 꽉 차도록 크기를 조정하는 역할을 합니다.

결론

이제 이미지 필터 효과를 적용하는 방법에 대해 알아보았습니다. PhotoSwipe 라이브러리를 사용하면 터치 기반의 멋진 이미지 갤러리를 만들 수 있으며, 필터 효과를 추가하여 이미지를 더욱 재미있게 표현할 수 있습니다. 상세한 내용은 PhotoSwipe 공식 문서를 참조하시기 바랍니다.