PhotoSwipe는 사용자가 터치 스와이프 제스처로 이미지를 슬라이드 할 수 있는 JavaScript 라이브러리입니다. 이 문서에서는 PhotoSwipe를 사용하여 이미지의 밝기와 명암을 조절하는 방법을 알아보겠습니다.

1. PhotoSwipe 설치

PhotoSwipe를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. npm을 통해 설치할 수 있습니다.

npm install photoswipe

2. 밝기와 명암을 조절할 이미지 준비

먼저 밝기와 명암을 조절할 대상으로 사용할 이미지를 준비해야 합니다. 예를 들어, 다음과 같이 HTML 코드로 이미지를 추가할 수 있습니다.

<div class="image-container">
  <img src="path/to/image.jpg" alt="Image">
</div>

3. PhotoSwipe 설정

밝기와 명암을 조절하기 위해 PhotoSwipe의 옵션을 설정해야 합니다. 아래 코드는 PhotoSwipe 인스턴스를 생성하고, 밝기와 명암을 조절할 수 있는 조작 핸들러를 추가하는 예제입니다.

// PhotoSwipe 인스턴스 생성
var pswpElement = document.querySelectorAll('.pswp')[0];
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);

// 이미지 클릭 시 PhotoSwipe 열기
document.querySelector('.image-container').addEventListener('click', function() {
  gallery.init();
});

// 이미지 조작 핸들러 추가
gallery.listen('afterChange', function() {
  var img = gallery.currItem.img;

  // 밝기와 명암 조절
  // 예시: 이미지를 50% 어둡게 만들기
  img.style.filter = 'brightness(50%)';
});

위의 예제 코드에서 img.style.filter = 'brightness(50%)'; 부분은 이미지의 밝기를 50% 어둡게 만들도록 설정한 것입니다. 필요에 따라 다른 CSS 속성을 사용하여 명암을 조절할 수 있습니다.

4. 실행 및 조절 확인

이제 준비한 이미지를 클릭하면 PhotoSwipe가 열리고, 이미지의 밝기와 명암을 조절할 수 있습니다. 클릭할 때마다 이미지가 어둡게 변하는 것을 확인해 보세요.

참고 자료

• PhotoSwipe 공식 사이트
• PhotoSwipe GitHub 저장소

PhotoSwipe를 사용하여 이미지의 밝기와 명암을 조절하는 방법을 알아보았습니다. 이를 응용하여 다양한 이미지 효과를 구현할 수 있습니다. 자세한 내용은 참고 자료를 참고하시기 바랍니다.