Colin's Blog
[javascript] PhotoSwipe를 이용한 이미지 픽셀리제이션 효과 구현 방법

PhotoSwipe는 모바일 및 데스크톱에서 사용할 수 있는 JavaScript 기반의 이미지 갤러리 라이브러리입니다. 이 라이브러리를 사용하여 이미지 픽셀리제이션 효과를 구현하는 방법에 대해 알아보겠습니다.

1. PhotoSwipe 설치

먼저 PhotoSwipe를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install photoswipe

2. PhotoSwipe HTML 마크업

HTML 마크업에서 픽셀리제이션 효과를 적용하고자 하는 이미지 요소를 준비합니다. 이미지를 감싸는 부모 요소를 생성하고, 이미지의 너비와 높이를 조절해야 합니다.

<div id="my-gallery" class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>

    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
            </div>
        </div>
    </div>
</div>

<div class="image-wrapper" data-size="800x600">
    <img src="path/to/image.jpg" alt="Image">
</div>

3. PhotoSwipe 초기화

JavaScript를 사용하여 PhotoSwipe를 초기화하고 픽셀리제이션 효과를 적용합니다. 아래는 간단한 예시입니다.

var myImage = document.getElementsByClassName('image-wrapper')[0];

myImage.onclick = function() {
    var pswpElement = document.querySelectorAll('.pswp')[0];

    var items = [
        {
            src: myImage.getElementsByTagName('img')[0].src,
            w: myImage.getAttribute('data-size').split('x')[0],
            h: myImage.getAttribute('data-size').split('x')[1]
        }
    ];

    var options = {
        index: 0
    };

    var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
};

이제 위 예시 코드를 사용하여 이미지를 클릭하면 PhotoSwipe 갤러리가 열리면서 픽셀리제이션 효과를 볼 수 있습니다.

참고 자료

© 2018 Colin. All rights reserved.