[Zoom] Image Resizing On Mouse Scroll Using Vanilla JS | wheel-zoom

Image-Resizing-On-Mouse-Scroll

zoom wheel is a zoom and pan library for vanilla JavaScript that applies drag to move and the mouse wheel to enlarge the functionality of the image or any HTML content material inside the container.

Resize the image using the mouse wheel + drag the scrollable image (as well as any HTML content).

Must Read: Wheel Style DateTime Picker Component Vue Library | Drumroll

How to make use of it:

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

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

2. Initialize the library on the image or any HTML content.

const myZoom = WZoom.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
  }
});

3. Re-init the library on window resizes.

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

4. Zoom in/out of the picture manually.

myZoom.zoomUp();
myZoom.zoomDown();

5. Enable/disable the drag-to-move functionality.

WZoom.create('img', {
  dragscrollable: false
});

6. Config the DragScrollable module.

WZoom.create('img', {
  dragScrollableOptions: {

    // smooth extinction moving element after set loose
    smoothExtinction: true,

    // after grabbing an element
    onGrab: function(){
      // do something
    },

    // every tick when moving element
    onMove: function(){
      // do something
    },

    // after after dropping an element
    onDrop: function(){
      // do something
    }

  }
});

7. Set the maximum allowed proportion of scale.

WZoom.create('img', {
  max_scale: 1
});

8. Set the resizing speed.

WZoom.create(element, {
  speed: 10
});

9. Determine the content type: image or HTML.

WZoom.create(element, {
  type: 'html'
});

10. Determine the height & width that should enable HTML content type.

WZoom.create(element, {
  type: 'html',
  width: 2000,
  height: 1000
});

See Demo And Download

Official Website(worka): Click Here

This superior jQuery/javascript plugin is developed by worka. For extra Advanced Usage, please go to the official website.