Skip to content
Zoomable Image

Programmatic use

zoomImage(imageToZoom, ZoomOptions)

Gzipped weight: 1 kB

This method will zoom the image when used. It generates a dialog HTML element and appends it as the next sibling to the original image.

It takes 2 parameters:

  • image HTMLImageElement: Required. The HTML Image Element that will be zoomed.
  • ZoomOptions ZoomOptions: Optional. Options to configure the image zoom.
    • scrollOffset number: Optional. The scroll distance needed to close the modal. Default value: 150.
import 'zoomable-image/dist/style.css'
import { zoomImage } from 'zoomable-image'


const myImage = document.getElementById('image-to-zoom')


// I am opening a modal with this image
zoomImage(myImage)


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