Parameters & Options

After you import Zoomist into your project, you can initialize it by using Zoomist function.

Zoomist instance

Zoomist can receive two parameters (zoomistElement & zoomistOptions), and returns initialized Zoomist instance.

For example:

const zoomist = new Zoomist('.zoomist-container', {
  maxScale: 4
})

After you initialize Zoomist, you can access Zoomist methods and properties from the instance. And you can also get the instance from your zoomistElement’s zoomist property:

For example:

const zoomist = new Zoomist('.zoomist-container')

zoomist.zoom(0.1)
document.querySelector('.zoomist-container').zoomist.zoom(0.1)

Parameters

There are two parameters for class Zoomist:

Parameter	Type	Description
`zoomistElement`	`HTMLElement \| string`	First parameter, Required. HTMLElement or string (CSS Selector) of zoomist container HTML element.
`zoomistOptions`	`object`	Second parameter, Optional. A `Object` with Zoomist options.

The second parameter zoomistOptions is optional, so you can initialize Zoomist simply like:

new Zoomist('.zoomist-container')
// or
const zoomistElement = document.querySelector('.zoomist-container')
new Zoomist(zoomistElement)

And Zoomist will set the options to default.

Options

All available options and initial value:

Name	Type	Default	Description
`bounds`	`boolean`	`true`	Set `.zoomist-image` can be scaled or dragged out of bounds.
`draggable`	`boolean`	`true`	Set `.zoomist-image` is draggable.
`wheelable`	`boolean`	`true`	Set `.zoomist-image` can be scaled when mouse wheeling.
`pinchable`	`boolean`	`true`	Set `.zoomist-image` is pinchable when pinching. (Only works on mobile device)
`minScale`	`number`	`1`	Set minimum scale size. Should be smaller than `initScale`. if `bounds` set to `true` and `minScale < 1`, `minScale` will be set to 1 automatically.
`maxScale`	`number`	`10`	Set maximum scale size. Should be bigger than `minScale`.
`initScale`	`number \| null`	`null`	Set initial scale size. Should be bigger than `minScale` and smaller than `maxScale`. If set to `null`, it will take `minScale` as `initScale`.
`zoomRatio`	`number`	`0.1`	Set the zoom ratio.
`disableDraggingClass`	`string`	`'zoomist-not-draggable'`	Elements matched this class will not be dragged.
`disableWheelingClass`	`string`	`'zoomist-not-wheelable'`	Elements matched this class will not be zoomed by mouse wheel.
`dragReleaseOnBounds`	`boolean`	`false`	If set to `true`, enable to release touch events to allow for further page scrolling when `.zoomist-image` is on bounds. Only works on devices have touch events and `bounds` set to `true`.
`wheelReleaseOnMinMax`	`boolean`	`false`	If set to `true`, enable to release wheel events to allow for further page scrolling when `.zoomist-image` is on `mixScale` or `maxScale`. Only works on devices have wheel events.
`slider`	`boolean \| SliderOptions`		The slider tool of Zoomist. Set to `true` to enable slider quickly. (See more slider options)
`zoomer`	`boolean \| ZoomerOptions`		The zoom tools of Zoomist. Set to `true` to enable zoomer quickly. (See more zoomer options)

For example:

new Zoomist('.zoomist-container', {
  maxScale: 4,
  initScale: 2,
  slider: true
})

Slider

Zoomist provide a simple slider tool for you. You can set option slider to true and Zoomist will create a horizontal slider in your zoomistElement. Or you can use these following options and to customize slider.

All available slider options:

Name	Type	Default	Description
`el`	`HTMLElement \| string \| null`	`null`	Receives a `HTMLElement` or a `string (CSS Selector)` and use it as the container of the slider.
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Set your slider horizontal or vertical.

For example:

<!-- custom slider -->
<div class="custom-zoomist-slider"></div>
<!-- zoomist -->
<div class="zoomist-container">
  <div class="zoomist-wrapper">
    <div class="zoomist-image">
      <!-- your content -->
    </div>
  </div>
</div>

new Zoomist('.zoomist-container', {
  slider: {
    el: '.custom-zoomist-slider',
    direction: 'vertical'
  }
})

To customize slider’s styles, checkout these CSS variables.

Zoomer

Zoomist also provide some zoom tools for you, like: zoom-in button, zoom-out button, reset button. You can set option zoomer to true and Zoomist will create those buttons in your zoomistElement. Or you can use these following options and to customize zoomer.

All available zoomer options:

Name	Type	Default	Description
`el`	`HTMLElement \| string \| null`	`null`	Define the container of all zoomer buttons.
`inEl`	`HTMLElement \| string \| null`	`null`	Define the zoom-in button. If you set it to keyword `.zoomist-zoomer-in`, Zoomist will generate a zoom-in button for you.
`outEl`	`HTMLElement \| string \| null`	`null`	Define the zoom-out button. If you set it to keyword `.zoomist-zoomer-out`, Zoomist will generate a zoom-out button for you.
`resetEl`	`HTMLElement \| string \| null`	`null`	Define the reset button. If you set it to keyword `.zoomist-zoomer-reset`, Zoomist will generate a reset button for you.
`disabledClass`	`string \| false \| null`	`'zoomist-zoomer-disabled'`	Set the disable class. It will be added on `inEl` when scale reaches the `maxScale`, be added on `outEl` when scale reaches the `minScale`, and be added on `resetEl` when scale reaches the `initScale`.

For example:

<!-- custom zoomer -->
<div class="custom-zoomist-zoomer">
  <button class="custom-zoomer-in">+</button>
  <button class="custom-zoomer-out">-</button>
</div>
<!-- zoomist -->
<div class="zoomist-container">
  <div class="zoomist-wrapper">
    <div class="zoomist-image">
      <!-- your content -->
    </div>
  </div>
</div>

new Zoomist('.zoomist-container', {
  zoomer: {
    inEl: '.custom-zoomer-in',
    outEl: '.custom-zoomer-out'
  }
})

To customize zoomer’s styles, checkout these CSS variables.