[javascript] PhotoSwipe를 이용한 이미지 회전 기능 구현 방법
PhotoSwipe는 모바일 및 데스크톱에서 사용할 수 있는 이미지 갤러리 라이브러리입니다. 이 라이브러리는 이미지를 확대, 축소, 회전 및 드래그 기능을 제공하여 사용자가 이미지들을 쉽게 탐색할 수 있도록 도와줍니다.
이제 PhotoSwipe를 사용하여 이미지 회전 기능을 구현해보겠습니다. 아래의 단계를 따라서 진행해주세요.
1. PhotoSwipe 라이브러리 추가
PhotoSwipe 라이브러리를 프로젝트에 추가해야 합니다. CDN을 사용하거나 프로젝트에 직접 파일을 추가할 수 있습니다. 아래의 예제는 CDN을 사용하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<!-- PhotoSwipe CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css">
</head>
<body>
<!-- PhotoSwipe JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>
</body>
</html>
2. 이미지 회전 버튼 추가
PhotoSwipe는 기본적으로 이미지를 확대/축소하는 기능만을 제공합니다. 새로운 기능인 이미지 회전 기능을 추가하기 위해, 이미지 회전 버튼을 추가해야 합니다.
<button id="rotateButton">회전</button>
3. JavaScript 코드 작성
이제 JavaScript 코드를 작성하여 이미지 회전 기능을 구현해보겠습니다.
// 버튼 클릭 시 회전 이벤트 핸들러
document.getElementById('rotateButton').onclick = function () {
// 현재 PhotoSwipe에서 보여지는 이미지를 가져옴
var currentItem = gallery.items[gallery.getCurrentIndex()];
// 이미지 회전 각도를 90도씩 증가시킴
currentItem.rotate += 90;
// 이미지 회전을 반영하기 위해 PhotoSwipe UI를 갱신함
gallery.invalidateCurrItems();
gallery.updateSize(true);
gallery.lightbox.build();
// 회전된 이미지를 화면에 표시함
gallery.goTo(gallery.getCurrentIndex());
};
위 코드는 회전 버튼을 클릭했을 때 PhotoSwipe에서 현재 보여지는 이미지의 회전 속성을 변경하고, 이를 UI에 반영하는 로직입니다. 이제 회전 버튼을 클릭하면 이미지가 90도씩 회전하여 보여질 것입니다.