Zoomist is TypeScript library for zooming any element. Also supports mobile devices.

Documentation |
Demo

🚀 Installation

There are few ways to import Zoomist into your project:

$3

You can easily install Zoomist from NPM.

``
npm i zoomist
`

`js
// import Zoomist styles
import 'zoomist/css'
// import Zoomist
import Zoomist from 'zoomist'

// initialize
const zoomist = new Zoomist(...)
`

$3

There are two ways to include Zoomist by using CDN.

UMD:

`html






`

ES modules in browser:

`html





`

$3

Or you can use Zoomist locally by DOWNLOAD assets.

---

📝 Basic usage

After downloading Zoomist, there are a few steps to create a Zoomist:

$3

You need to add Zoomist layout in your HTML:

`html



`css
.zoomist-container {
width: 100%;
max-width: 600px;
}

.zoomist-image {
width: 100%;
aspect-ratio: 1;
}

.zoomist-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
`

$3

Finally, initialize Zoomist in your js file:

`js
const zoomist = new Zoomist('.zoomist-container', {
// Optional parameters
maxScale: 4,
bounds: true,
// if you need slider
slider: true,
// if you need zoomer
zoomer: true
})
`

---

📖 Documentation

$3

All available parameters and initial value:

`js
new Zoomist('.zoomist-container', {
// set is draggable or not
draggable: true,
// set is wheelable or not
wheelable: true,
// set is pinchable or not
pinchable: true,
// set image stuck on bounds
bounds: true,
// the ratio of zooming at one time
zoomRatio: 0.1,
// the max scale of zoomist-image (must be number larger then initScale)
maxScale: 10,
// the min scale of zoomist-image (must be number smaller then initScale)
minScale: 1,
// set initial scale of zoomist-image
initScale: null,
// if set to true, enable to release touch events to allow for further page scrolling when .zoomist-image is on bounds.
dragReleaseOnBounds: false,
// if set to true, enable to release wheel events to allow for further page scrolling when .zoomist-image is on mixScale or maxScale.
wheelReleaseOnMinMax: false,
// elements matched this class will not be dragged.
disableDraggingClass: '.zoomist-not-draggable',
// elements matched this class will not be zoomed by mouse wheel.
disableWheelingClass: '.zoomist-not-wheelable',
// if set to true, enable to smooth drag
smooth: false
// zoomist slider module
slider: {
// the css selector string or a element of the slider
el: null,
// the direction of the slider 'horizontal' or 'vertical'
direction: 'horizontal'
},
//
zoomer: {
// the wrapper of all zoomer buttons
el: null,
// the css selector string or a element for in-zoomer
inEl: null,
// the css selector string or a element for out-zoomer
outEl: null,
// the css selector string or a element for reset-zoomer
resetEl: null,
// in zoomer and out zoomer will be disabled when image comes to maximin or minimum
disabledClass: 'zoomist-zoomer-disabled'
}
})
`

$3

All available methods:

`js
const zoomist = new Zoomist(...)

zoomist.zoom(ratio)
zoomist.zoomTo(ratio)
zoomist.move({ x, y })
zoomist.moveTo({ x, y })
zoomist.slideTo(value)
zoomist.reset()
zoomist.update(options)
zoomist.destroy(cleanStyle)
zoomist.destroySlider()
zoomist.destroyZoomer()
zoomist.destroyModules()

zoomist.on(event, handler)

zoomist.getImageData()
zoomist.getContainerData()
zoomist.getSliderValue()

zoomist.isOnBoundX()
zoomist.isOnBoundY()
zoomist.isOnBoundTop()
zoomist.isOnBoundBottom()
zoomist.isOnBoundLeft()
zoomist.isOnBoundRight()
zoomist.isOnMinScale()
zoomist.isOnMaxScale()
`

$3

`js
// Using on parameter before initialization.
const zoomist = new Zoomist('.zoomist-container', {
on: {
// invoked when zoomist instance ready
ready(zoomist) {...},
// invoked when reset methods be used
reset(zoomist) {...},
// invoked when image changes it's size
resize(zoomist) {...},
// invoked before destroy methods be used
beforeDestroy(zoomist) {...},
// invoked after destroy methods be used
destroy(zoomist) {...},
// invoked before update methods be used
beforeUpdate(zoomist) {...},
// invoked when update methods be used
update(zoomist) {...},
// invoked when image is zooming
zoom(zoomist, scale) {...},
// invoked when wheeling
wheel(zoomist, scale, event) {...},
// invoked when mousedown on wrapper
dragStart(zoomist, transform, event) {...},
// invoked when dragging the image
drag(zoomist, transform, event) {...},
// invoked when mouseup on wrapper
dragEnd(zoomist, transform, event) {...},
// invoked when mousedown on wrapper
pinchStart(zoomist, scale, event) {...},
// invoked when pinching the image
pinch(zoomist, scale, event) {...},
// invoked when mouseup on wrapper
pinchEnd(zoomist, scale, event) {...},
// invoked when mousedown on slider
slideStart(zoomist, value, event) {...},
// invoked when sliding the slider
slide(zoomist, value, event) {...},
// invoked when mouseup on slider
slideEnd(zoomist, value, event) {...}
}
})

// Using on method after initialization.
// For example:
zoomist.on('zoom', (zoomist, scale) => {...})
``