[javascript] Hammer.js를 사용하여 터치 이벤트를 사진 크게보기에 적용하는 방법은?

27 Nov 2023

javascript

먼저, Hammer.js 라이브러리를 다운로드하고 HTML 파일에 포함시킵니다. 다음과 같이 <head> 태그 내에 <script> 태그를 추가합니다:

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

사진을 포함한 HTML 요소를 선택합니다. 예를 들어, <img> 태그를 사용하여 사진을 표시하고 있는 요소를 선택합니다:

<img src="myphoto.jpg" id="photoElement" />

JavaScript 코드에서 Hammer.js를 사용하여 터치 이벤트를 처리합니다. 다음과 같이 JavaScript 파일에 다음 코드를 추가합니다:

// 사진 요소를 선택합니다
var photoElement = document.getElementById('photoElement');

// Hammer.js 인스턴스를 생성합니다
var hammer = new Hammer(photoElement);

// pan, pinch, rotate 등의 터치 제스처를 등록합니다
hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammer.get('pinch').set({ enable: true });
hammer.get('rotate').set({ enable: true });

// 터치 이벤트 핸들러를 등록합니다
hammer.on('pan pinch rotate', function(event) {
  // 터치 이벤트에 따라 사진을 크게 보이도록 처리하는 코드를 작성합니다
  // 예: 사진을 확대 또는 축소하거나, 사진을 회전하는 등의 동작을 수행합니다
});

위의 코드에서 ‘pan’, ‘pinch’, ‘rotate’는 Hammer.js가 지원하는 터치 제스처 중 일부입니다. 원하는 터치 제스처를 등록하고 이벤트 핸들러 내에서 해당 이벤트를 처리할 수 있습니다.

이제 Hammer.js를 사용하여 터치 이벤트를 사진 크게 보기에 적용할 준비가 되었습니다. 이벤트 핸들러 내에서 사진을 확대, 축소, 회전 등의 동작을 구현하면 됩니다.

추가적인 정보나 예제 코드는 Hammer.js 공식 문서를 참고하시기 바랍니다.