미리보기 이미지를 클릭하면 전체화면으로 보여주는 기능은 많은 웹 사이트에서 사용되는 기능 중 하나입니다. 이렇게 사용자에게 보다 큰 이미지를 제공하는 것은 사용자 경험을 향상시키는 중요한 요소입니다. 이번에는 PhotoSwipe라는 자바스크립트 라이브러리를 이용하여 이미지 소프트 포커스 효과를 구현하는 방법을 알아보겠습니다.

PhotoSwipe란?

PhotoSwipe는 자바스크립트로 작성된 강력한 이미지 및 동영상 갤러리 라이브러리입니다. 사용자가 이미지를 클릭하면 풀스크린 상태로 이미지를 확대하여 보여주는 기능을 제공합니다. 또한 터치 이벤트를 지원하여 모바일 기기에서도 원활한 사용이 가능합니다.

설치 및 설정

다음과 같이 npm을 사용하여 PhotoSwipe 라이브러리를 설치합니다.

npm install photoswipe

PhotoSwipe 라이브러리를 프로젝트에 포함시키기 위해 HTML 파일에 다음 스크립트 태그를 추가합니다.

<link rel="stylesheet" href="path/to/photoswipe.css" />
<link rel="stylesheet" href="path/to/default-skin.css" />
<script src="path/to/photoswipe.min.js"></script>
<script src="path/to/photoswipe-ui-default.min.js"></script>

HTML 구조

이미지 목록을 나타낼 HTML 구조를 작성합니다. 일반적으로 <ul>과 <li>를 사용하여 목록을 구성합니다. 각 항목에는 썸네일 이미지와 원본 이미지의 경로를 저장하는 데이터 속성을 추가합니다.

<ul class="gallery">
  <li data-thumbnail="path/to/thumbnail-image.jpg" data-src="path/to/full-image.jpg"></li>
  <li data-thumbnail="path/to/thumbnail-image.jpg" data-src="path/to/full-image.jpg"></li>
  <li data-thumbnail="path/to/thumbnail-image.jpg" data-src="path/to/full-image.jpg"></li>
  <!-- 추가적인 항목들 -->
</ul>

자바스크립트 코드

PhotoSwipe를 초기화하고 이미지를 클릭했을 때 동작을 설정하기 위한 자바스크립트 코드를 작성합니다.

var pswpElement = document.querySelectorAll('.pswp')[0];

var items = [];

var gallery = document.querySelectorAll('.gallery li');
gallery.forEach(function (el) {
  var item = {
    src: el.getAttribute('data-src'),
    w: 1200,
    h: 800,
    title: el.getAttribute('data-title')
  };
  items.push(item);
});

var options = {
  index: 0
};

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

gallery.init();

스타일링

PhotoSwipe의 스타일링은 photoswipe.css와 default-skin.css 파일에 정의되어 있습니다. 갤러리의 디자인을 변경하고자 할 경우, 이 파일들을 수정하거나 별도의 CSS 파일을 작성하여 커스터마이징할 수 있습니다.

결론

PhotoSwipe를 사용하여 이미지 소프트 포커스 효과를 구현하는 방법에 대해 알아보았습니다. 이미지를 클릭하면 전체화면으로 보여주는 기능을 추가하여 사용자의 경험을 향상시킬 수 있습니다. PhotoSwipe는 다양한 옵션을 제공하므로 필요에 따라 세부적인 설정을 조정하여 사용할 수도 있습니다.

PhotoSwipe 공식 웹 사이트: https://photoswipe.com/ 데모 및 예제: https://photoswipe.com/documentation/getting-started.html