Drag To Move & Mouse Wheel To Zoom Library – wheel-zoom

Category: Image , Javascript , Zoom | August 15, 2019
Author: worka
Views Total: 174
Official Page: Go to website
Last Update: August 15, 2019
License: MIT

Preview:

Drag To Move & Mouse Wheel To Zoom Library – wheel-zoom

Description:

wheel-zoom is a vanilla JavaScript zoom & pan library which applies drag to move and mouse wheel to zoom functionalities on the image within a container.

How to use it:

Import the wheel-zoom.js library into the HTML page.

<script src="wheel-zoom.js"></script>

Initialize the library on the image you specify.

jcWheelZoom = JcWheelZoom.create('img', {
  prepare: function (scale, correct_x, correct_y) {
    // do something when image prepared
  },
  rescale: function (scale, correct_x, correct_y, min_scale) {
    // do something image rescaled
  }
});

Re-init the library on window resize.

window.addEventListener('resize', function () {
  jcWheelZoom.prepare();
})

Zoom in/out the image manually.

jcWheelZoom.zoomUp();
jcWheelZoom.zoomDown();

Enable/disable the drag to move functionality. Default: true.

jcWheelZoom = JcWheelZoom.create('img', {
  dragscrollable: false
});

Set the maximum allowed proportion of scale. Default: 1.

jcWheelZoom = JcWheelZoom.create('img', {
  max_scale: 1
});

Set the resizing speed. Default: 10.

jcWheelZoom = JcWheelZoom.create('img', {
  speed: 10
});

You Might Be Interested In:


One thought on “Drag To Move & Mouse Wheel To Zoom Library – wheel-zoom

  1. Andrea

    Hi, Thanks for the library!
    With firefox using the mouse wheel I dont get the on image, working on chrome

    Reply

Leave a Reply