Colin's Blog
[javascript] PhotoSwipe와 연동하여 이미지 투명도 조절하기

PhotoSwipe는 모바일 장치와 웹에서 이미지 갤러리를 생성하기 위한 JavaScript 라이브러리입니다. PhotoSwipe를 사용하면 사용자는 화면을 확대 또는 축소하고 이미지를 스와이프하여 탐색할 수 있습니다. 이러한 갤러리에서 투명도를 조절하여 이미지를 선명하게 표시할 수도 있습니다.

1. PhotoSwipe 설치

PhotoSwipe의 최신 버전은 다음과 같이 설치할 수 있습니다.

npm install photoswipe

2. PhotoSwipe 초기화

PhotoSwipe를 사용하기 전에 먼저 초기화해야 합니다. 다음 코드를 사용하여 PhotoSwipe 클래스를 초기화할 수 있습니다.

import PhotoSwipe from 'photoswipe';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';

const gallery = new PhotoSwipe('.my-gallery', PhotoSwipeUI_Default, items, options);

3. 투명도 조절 기능 추가

PhotoSwipe에서 이미지의 투명도를 조절하려면 다음 단계를 따르세요.

3.1. CSS 스타일 추가

PhotoSwipe의 CSS 파일에 다음 스타일을 추가하여 투명도 컨트롤을 표시하세요.

.pswp__top-bar {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.pswp__button--transparent {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.pswp__button--transparent:hover,
.pswp__button--transparent:focus {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

3.2. HTML 엘리먼트 수정

PhotoSwipe의 HTML 마크업에서 투명도 조절 버튼을 추가합니다.

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <!-- 생략 -->
  <div class="pswp__top-bar">
    <!-- 생략 -->
    <button class="pswp__button pswp__button--transparent" title="투명도">
      <span class="pswp__preloader__tip"></span>
    </button>
  </div>
  <!-- 생략 -->
</div>

3.3. JavaScript 이벤트 핸들링

이제 투명도 조절 버튼을 클릭하면 이미지의 투명도를 조절하는 JavaScript 이벤트 핸들러를 작성합니다.

// 투명도 조절 버튼을 선택합니다.
const transparencyButton = document.querySelector('.pswp__button--transparent');

// 투명도 조절 이벤트 핸들러를 추가합니다.
transparencyButton.addEventListener('click', function() {
  // 이미지의 투명도를 조절하는 로직을 작성하세요.
});

4. 참고 자료

© 2018 Colin. All rights reserved.