[javascript] PhotoSwipe와 연동하여 메이슨리리 확장 그리드 구현하기

22 Nov 2023

javascript

개요

이번 글에서는 PhotoSwipe와 함께 사용할 수 있는 메이슨리리(Masonry) 확장 그리드를 구현하는 방법에 대해 알아보겠습니다. 메이슨리리는 간단한 사용법과 다양한 레이아웃 옵션으로 인기 있는 그리드 레이아웃 라이브러리입니다. PhotoSwipe은 대표적인 이미지 뷰어 라이브러리로 이미지 갤러리와 함께 사용하기 좋습니다.

PhotoSwipe와 Masonry 설치하기

먼저, PhotoSwipe와 Masonry를 설치해야 합니다. 다음 명령어를 사용하여 각각의 라이브러리를 설치합니다.

npm install photoswipe
npm install masonry-layout

HTML 구조 준비

PhotoSwipe의 이미지 갤러리와 Masonry의 그리드를 사용하기 위해 HTML 구조를 준비해야 합니다. 아래와 같은 구조로 HTML 파일을 작성해주세요.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="path/to/photoswipe.css" />
  <link rel="stylesheet" href="path/to/default-skin.css" />
  <link rel="stylesheet" href="path/to/masonry.css" />
  <script src="path/to/masonry.pkgd.js"></script>
  <script src="path/to/photoswipe.min.js"></script>
  <script src="path/to/photoswipe-ui-default.min.js"></script>
</head>
<body>
  <div id="gallery">
    <div class="grid-sizer"></div>
    <!-- 이미지 아이템들 -->
  </div>
</body>
</html>

JavaScript 코드 작성

이제 JavaScript 코드를 작성하여 PhotoSwipe와 Masonry를 초기화해야 합니다. 아래 코드를 스크립트 태그 안에 작성해주세요.

var gallery = new PhotoSwipe( document.querySelector('#gallery'), PhotoSwipeUI_Default, items, options );

var masonry = new Masonry( '#gallery', {
  // Masonry의 옵션 설정
});

gallery.listen('afterChange', function() {
  masonry.layout();
});

이미지 아이템 추가

마지막으로, 이미지 아이템을 추가해야 합니다. items 배열에 이미지 객체를 추가하고, 해당 이미지 객체의 src와 w, h 등의 속성을 설정해주세요. 아래 코드는 예시입니다.

var items = [
  {
    src: 'path/to/image.jpg',
    w: 1200,
    h: 800
  },
  // 추가 이미지 아이템들
];

결론

이상으로 PhotoSwipe와 함께 사용할 수 있는 메이슨리리 확장 그리드를 구현하는 방법에 대해 알아보았습니다. PhotoSwipe와 Masonry는 각각의 라이브러리가 제공하는 기능을 유연하게 결합하여 멋진 이미지 갤러리와 그리드를 구성할 수 있습니다. 개발에 참고해보세요!