[javascript] PhotoSwipe를 이용한 이미지 화이트 보드 기능 설명

22 Nov 2023

javascript

PhotoSwipe는 모바일 및 데스크탑에서 이미지를 확대하여 보여주는 기능을 제공하는 자바스크립트 라이브러리입니다. 이 라이브러리를 활용하여 이미지 화이트 보드 기능을 구현할 수 있습니다.

1. PhotoSwipe 설치 및 설정

먼저, PhotoSwipe를 설치해야 합니다. 아래의 명령어를 사용하여 PhotoSwipe를 다운로드합니다.

npm install photoswipe

다운로드 후에는 PhotoSwipe를 사용할 HTML 파일에 다음과 같이 스타일시트와 자바스크립트 파일을 추가합니다.

<head>
  <link rel="stylesheet" href="path/to/photoswipe.css">
  <link rel="stylesheet" href="path/to/default-skin/default-skin.css">
</head>
<body>
  <!-- HTML 내용 -->
  <script src="path/to/photoswipe.min.js"></script>
  <script src="path/to/photoswipe-ui-default.min.js"></script>
  <script src="path/to/app.js"></script>
</body>

2. 이미지 화이트 보드 구현

이제 이미지 화이트 보드를 구현해보겠습니다. 이 예제에서는 이미지를 클릭했을 때, 해당 이미지를 화이트 보드로 열고 그 위에 그림을 그릴 수 있도록 설정하겠습니다.

우선, 이미지의 클릭 이벤트를 감지하여 PhotoSwipe를 열 수 있도록 다음과 같은 자바스크립트 코드를 작성합니다.

const items = [
  {
    src: 'path/to/image1.jpg',
    w: 1200,
    h: 800
  },
  {
    src: 'path/to/image2.jpg',
    w: 1000,
    h: 700
  },
  // 추가 이미지
];

const options = {
  index: 0,
  getThumbBoundsFn: function(index) {
    const thumbnail = document.querySelectorAll('.thumbnail')[index];
    const rect = thumbnail.getBoundingClientRect();
    return { x: rect.left, y: rect.top, w: rect.width };
  }
};

const gallery = new PhotoSwipe(document.querySelector('.pswp'), PhotoSwipeUI_Default, items, options);

document.querySelectorAll('.thumbnail').forEach(function(thumbnail, index) {
  thumbnail.addEventListener('click', function(e) {
    e.preventDefault();
    options.index = index;
    gallery.init();
  });
});

위 코드에서 각 이미지의 소스 경로와 크기를 items 배열에 추가합니다. 또한, getThumbBoundsFn 함수를 정의하여 썸네일(섬네일) 이미지의 위치를 가져오도록 합니다.

마지막으로, 각 썸네일 이미지에 클릭 이벤트를 추가하여 해당 이미지를 PhotoSwipe로 열도록 합니다.

<div class="thumbnail" style="background-image: url(path/to/thumbnail1.jpg);"></div>
<div class="thumbnail" style="background-image: url(path/to/thumbnail2.jpg);"></div>
<!-- 추가 썸네일 이미지 -->

위와 같이 HTML 파일에 썸네일 이미지를 추가합니다. style 속성을 통해 이미지 경로를 지정합니다.

PhotoSwipe를 화이트 보드로 활용하려면, 추가로 터치 이벤트 처리 및 그림 그리는 기능을 구현해야 합니다. 이 부분은 애플리케이션의 요구사항에 따라 구체적으로 설계되어야 하므로 자세한 코드는 생략하도록 하겠습니다.

결론

PhotoSwipe를 이용하여 이미지 화이트 보드 기능을 구현하는 방법에 대해 알아보았습니다. PhotoSwipe의 다양한 기능을 활용하여 사용자 친화적이고 멋진 이미지 화이트 보드를 개발할 수 있습니다. 자세한 내용은 PhotoSwipe 공식 문서를 참조하시기 바랍니다.