Butochnikov/zoomist

Cotton.JS is a JavaScript library that allows you to make a mouse interaction animation easily.

Getting Started

Download

npm install zoomist

Manual download

Download ZIP

Installation

ES modules

If you download the files via npm, you just need to import import Zoomist in your own project :

import Zoomist from 'zoomist'

Script tag include

If you include zoomist with tag, you need to add CSS as well.

<link rel="stylesheet" src="zoomist.min.css"/>
<script src="zoomist.min.js"></script>

or using CDN :

<link rel="stylesheet" src="https://cdn.jsdelivr.net/gh/cotton123236/zoomist@latest/dist/zoomist.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/cotton123236/zoomist@latest/dist/zoomist.min.js"></script>

Basic Usage

HTML

Create an container and set [data-zoomist-src] attribute with image URL for Zoomist.

<div id="my-zoomist" data-zoomist-src="./image.png"></div>

JavaScript

Initialize Zoomist in JavaScript.

// syntax
new Zoomist(element[, options])

// for example
new Zoomist('#my-zoomist')

// advanced usage
const myZoomist = document.querySelector('#my-zoomist')
new Zoomist(zoomistElement, {
  // optional parameters
  maxRatio: 4,
  height: '60%',
  // if you need silder
  slider: true,
  // if you need zoomer
  zoomer: true,
  // event
  on: {
    ready() {
      console.log('Zoomist ready!')
    }
  }
})

See some demo.

Documentation

Parameters

Knowing more details about zoomist parameters.

All available parameters :

new Zoomist('#my-zoomist', {
    src: 'data-zoomist-src',
    fill: 'cover',
    draggable: true,
    wheelable: true,
    pinchable: true,
    bounds: true,
    zoomRatio: 0.1,
    maxRatio: false,
    height: 'auto',
    slider: {
      el: null,
      direction: 'horizontal',
      maxRatio: 2
    },
    zoomer: {
      inEl: null,
      outEl: null,
      disableOnBounds: true
    }
})

Methods

Knowing more details about zoomist methods.

All available methods :

const myZoomist = new Zoomist('#my-zoomist')

// call the method after initialization.
myZoomist.getContainerData()
myZoomist.getImageData()
myZoomist.getSliderValue()
myZoomist.getZoomRatio()
myZoomist.zoom(ratio)
myZoomist.zoomTo(ratio)
myZoomist.slideTo(value, isOnlySlide)
zoomist.on(event, handler)
zoomist.reset()
zoomist.update()
zoomist.destroy()

Events

Knowing more details about zoomist events.

All available events :

// Using on parameter before initialization.
const myZoomist = new Zoomist('#my-zoomist', {
    on: {
        ready() {},
        zoom(ratio) {},
        wheel(event) {},
        dragStart(transform, event) {},
        drag(transform, event) {},
        dragEnd(transform, event) {},
        slideStart(value, event) {},
        slide(value, event) {},
        slideEnd(value, event) {},
        pinchStart(event) {},
        pinch(event) {},
        pinchEnd(event) {},
        resize() {},
        reset() {},
        destroy() {},
        update() {}
    }
})

// Using on method after initialization.
myZoomist.on('ready', function() {})
myZoomist.on('zoom', function(ratio) {})
myZoomist.on('wheel', function(event) {})
myZoomist.on('dragStart', function(transform, event) {})
myZoomist.on('drag', function(transform, event) {})
myZoomist.on('dragEnd', function(transform, event) {})
myZoomist.on('slideStart', function(value, event) {})
myZoomist.on('slide', function(value, event) {})
myZoomist.on('slideEnd', function(value, event) {})
myZoomist.on('pinchStart', function(event) {})
myZoomist.on('pinch', function(event) {})
myZoomist.on('pinchEnd', function(event) {})
myZoomist.on('resize', function() {})
myZoomist.on('reset', function() {})
myZoomist.on('destroy', function() {})
myZoomist.on('update', function() {})

Others

Visit the website
Released under the MIT License.

Butochnikov / zoomist