Using it programmatically

For this feature, you only have to add the attribute data-zoomable-hd='./your-hd-image.jpg' with the high definition image source.

HTML

<button id="zoom">Click me to zoom!</button>
<img
  id="image-to-zoom"
  src="./moon.webp"
  width="626"
  height="417"
/>

JS

// Import only zoomImage
import { zoomImage } from 'zoomable-image'

function handleClick() {
  const $image = document.getElementById('image-to-zoom')
  // And just use it
  zoomImage($image)
}

const button = document.getElementById('zoom')
button?.addEventListener('click', handleClick)

Click me to zoom!