이미지 갤러리에 터치 이벤트를 적용하기 위해 Hammer.js라는 라이브러리를 사용할 수 있습니다. Hammer.js는 다양한 터치 제스처를 지원하며, 이를 활용하여 이미지의 드래그, 확대/축소, 스와이프 등을 구현할 수 있습니다.

먼저, Hammer.js 라이브러리를 HTML 문서에 추가합니다. 다음은 CDN을 통해 라이브러리를 불러오는 예시입니다.

<script src="https://cdn.jsdelivr.net/npm/hammerjs"></script>

다음으로, 터치 이벤트를 적용할 이미지 갤러리 요소를 선택하고 Hammer.js를 초기화합니다. 예를 들어, 클래스 이름이 “gallery”인 div 요소에 터치 이벤트를 적용하고 싶을 경우 다음과 같이 작성할 수 있습니다.

var gallery = document.querySelector('.gallery');
var hammer = new Hammer(gallery);

이제 Hammer.js의 여러 제스처 이벤트를 활용해서 원하는 기능을 구현할 수 있습니다. 예를 들어, 드래그로 이미지를 이동하고 싶다면 다음과 같이 코드를 작성할 수 있습니다.

hammer.on('pan', function(event) {
  // 이미지를 드래그하는 동안의 처리 로직
  var x = event.deltaX;
  var y = event.deltaY;
  // 이미지 위치를 x, y 값에 맞게 변경하는 등의 처리
});

또한, 확대/축소 기능을 구현하려면 “pinch” 이벤트를 사용할 수 있습니다.

hammer.on('pinch', function(event) {
  // 이미지를 확대/축소하는 동안의 처리 로직
  var scale = event.scale;
  // 이미지의 크기를 scale 값에 맞게 변경하는 등의 처리
});

다른 제스처 이벤트들인 “swipe”나 “tap” 등도 마찬가지로 활용할 수 있습니다.

Hammer.js의 API 문서를 참고하여 더 다양한 기능을 구현해보세요. 원하는 터치 제스처에 따라 적절한 이벤트를 사용하고, 갤러리 이미지의 동작에 맞는 처리 로직을 구현해주면 됩니다.

참고 문서:

• Hammer.js 공식 문서
• Hammer.js GitHub 저장소