Zooming

Zooming instance.

new Zooming()
Instance Members
constructor(options?)
listen(el)
config(options)
open(el, cb = this.options.onOpen)
close(cb = this.options.onClose)
grab(x, y, scaleExtra?, cb = this.options.scaleExtra)
move(x, y, scaleExtra?, cb = this.options.scaleExtra)
release(cb = this.options.onRelease)

options

A list of options.

options
Example
// Default options
const options = {
  defaultZoomable: 'img[data-action="zoom"]',
  enableGrab: true,
  preloadImage: false,
  closeOnWindowResize: true,
  transitionDuration: 0.4,
  transitionTimingFunction: 'cubic-bezier(0.4, 0, 0, 1)',
  bgColor: 'rgb(255, 255, 255)',
  bgOpacity: 1,
  scaleBase: 1.0,
  scaleExtra: 0.5,
  scrollThreshold: 40,
  zIndex: 998,
  customSize: null,
  onOpen: null,
  onClose: null,
  onRelease: null,
  onBeforeOpen: null,
  onBeforeClose: null,
  onBeforeGrab: null,
  onBeforeRelease: null
}

defaultZoomable

Zoomable elements by default. It can be a css selector or an element.

defaultZoomable

enableGrab

To be able to grab and drag the image for extra zoom-in.

enableGrab

preloadImage

Preload zoomable images.

preloadImage

closeOnWindowResize

Close the zoomed image when browser window is resized.

closeOnWindowResize

transitionDuration

Transition duration in seconds.

transitionDuration

transitionTimingFunction

Transition timing function.

transitionTimingFunction

bgColor

Overlay background color.

bgColor

bgOpacity

Overlay background opacity.

bgOpacity

scaleBase

The base scale factor for zooming. By default scale to fit the window.

scaleBase

scaleExtra

The additional scale factor when grabbing the image.

scaleExtra

scrollThreshold

How much scrolling it takes before closing out.

scrollThreshold

zIndex

The z-index that the overlay will be added with.

zIndex

customSize

Scale (zoom in) to given width and height. Ignore scaleBase if set.

customSize
Example
customSize: { width: 800, height: 400 }

onOpen

A callback function that will be called when a target is opened and transition has ended. It will get the target element as the argument.

onOpen

onClose

Same as above, except fired when closed.

onClose

onRelease

Same as above, except fired when released.

onRelease

onBeforeOpen

A callback function that will be called before open.

onBeforeOpen

onBeforeClose

A callback function that will be called before close.

onBeforeClose

onBeforeGrab

A callback function that will be called before grab.

onBeforeGrab

onBeforeRelease

A callback function that will be called before release.

onBeforeRelease