###

``
Need help reading this?

### Zooming

Zooming instance.

new Zooming()
Instance Members
▸ constructor(options?)
constructor(options: Object?)
Parameters
options `(Object?)` Update default options if provided.
▸ listen(el)

Make element(s) zoomable.

listen(el: (string | Element)): this
Parameters
el `((string | Element))` A css selector or an Element.
Returns
`this`:
▸ open(el, cb = this.options.onOpen)

Open (zoom in) the Element.

open(el: Element, cb: Function?): this
Parameters
el `(Element)` The Element to open.
cb `(Function? = `this.options.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.
Returns
`this`:
▸ close(cb = this.options.onClose)

Close (zoom out) the Element currently opened.

close(cb: Function?): this
Parameters
cb `(Function? = `this.options.onClose`)` A callback function that will be called when a target is closed and transition has ended. It will get the target element as the argument.
Returns
`this`:
▸ grab(x, y, scaleExtra?, cb = this.options.scaleExtra)

Grab the Element currently opened given a position and apply extra zoom-in.

grab(x: number, y: number, scaleExtra: number?= onEnd = () => {, cb: Function?): this
Parameters
x `(number)` The X-axis of where the press happened.
y `(number)` The Y-axis of where the press happened.
scaleExtra `(number?= onEnd = () => {)` Extra zoom-in to apply.
cb `(Function? = `this.options.scaleExtra`)` A callback function that will be called when a target is grabbed and transition has ended. It will get the target element as the argument.
Returns
`this`:
▸ move(x, y, scaleExtra?, cb = this.options.scaleExtra)

Move the Element currently grabbed given a position and apply extra zoom-in.

move(x: number, y: number, scaleExtra: number?= body.style.cursor = cur, cb: Function?): this
Parameters
x `(number)` The X-axis of where the press happened.
y `(number)` The Y-axis of where the press happened.
scaleExtra `(number?= body.style.cursor = cur)` Extra zoom-in to apply.
cb `(Function? = `this.options.scaleExtra`)` A callback function that will be called when a target is moved and transition has ended. It will get the target element as the argument.
Returns
`this`:
▸ release(cb = this.options.onRelease)

Release the Element currently grabbed.

release(cb: Function?): this
Parameters
cb `(Function? = `this.options.onRelease`)` A callback function that will be called when a target is released and transition has ended. It will get the target element as the argument.
Returns
`this`:
▸ config(options)

Update options.

config(options: Object): this
Parameters
options `(Object)` An Object that contains this.options.
Returns
`this`:

### OPTIONS

A list of options.

OPTIONS
Example

    // Default options
    var options = {
      defaultZoomable: 'img[data-action="zoom"]',
      enableGrab: true,
      preloadImage: 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,
      customSize: null,
      onOpen: null,
      onClose: null,
      onRelease: null,
      onBeforeOpen: null,
      onBeforeClose: null,
      onBeforeGrab: null,
      onBeforeMove: null,
      onBeforeRelease: null
    }

Static Members
▸ 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 images with attribute "data-original".

preloadImage
▸ 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 extra scale factor when grabbing the image.

scaleExtra
▸ scrollThreshold

How much scrolling it takes before closing out.

scrollThreshold
▸ 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
▸ onBeforeMove

A callback function that will be called before move.

onBeforeMove
▸ onBeforeRelease

A callback function that will be called before release.

onBeforeRelease