Automatic use

initZoomableImages(InitOptions)

Gzipped weight: 1.2 kB

This method will add click event listeners to the images in the document that contains the data-zoomable-image attribute.

Moreover, it will pre-fetch images with the attribute data-zoomable-hd upon mouseenter, touchstart, and focus events, enhancing the overall user experience.

It takes an object InitOptions as a parameter, which may contain the following keys:

• scrollOffset Number: Optional. The scroll distance needed to close the modal. Default value: 150.

import 'zoomable-image/dist/style.css'
import { initZoomableImages } from 'zoomable-image'

// And when your document is ready...
initZoomableImages()

// Or with custom options..
initZoomableImages({
  scrollOffset: 300,
})

Your HTML code may be like this one:

<img
  data-zoomable-image
  data-zoomable-hd="../public/high-definition.jpg"
  class="image"
  src="../public/low-definition.webp"
  alt=""
/>