Press "Enter" to skip to content

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

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.

wheel zoom javascript, vanilla js wheel zoom, zoom image on mouse scroll jquery, zoom div on scroll, turn off ctrl scroll wheel zoom, image zoom plugin, mouse wheel zoom javascript

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

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 picture or any HTML content you specify.

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 resize.

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

4. Zoom in/out the picture manually.

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

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

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. Default: 1.

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

8. Set the resizing speed. Default: 10.

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

9. Determine the content kind: image or HTML.

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

10. Determine the height & width should you enabled HTML content type.

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

Drag To Move & Mouse Wheel To Zoom Library, image zoom on mouse scroll, image zoom gallery


See Demo And Download

Official Website(worka): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *