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

Category: Image , Javascript , Zoom | January 4, 2024
Author:worka
Views Total:257 views
Official Page:Go to website
Last Update:January 4, 2024
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 or any HTML content within a container.

Zoom and pinch on touch screen devices are supported as well.

How to use it:

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

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

2. Initialize the library on the image 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 image manually.

myZoom.zoomUp(); 
myZoom.maxZoomUp();
myZoom.zoomDown();
myZoom.maxZoomDown();
myZoom.zoomUpToPoint({x, y});
myZoom.zoomDownToPoint({x, y});
myZoom.maxZoomUpToPoint({x, y});
myZoom.prepare(); // re-init
myZoom.destroy(); // destroy

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

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

6. Config the DragScrollable module.

WZoom.create('img', {
  // scaled image can be dragged with the mouse to see parts of the image that are out of scale
  dragScrollable: true,
  // Time of smooth extinction
  smoothTime: .25,
  // Optional override to smoothTime for mouse drag/pan actions
  smoothTimeDrag: number,
  // 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 minimal/maximum allowed proportion of scale.

WZoom.create('img', {
  maxScale: 1,
  minScale: null
});

8. Set the resizing speed. Default: 10.

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

9. Determine the content type: image or html.

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

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

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

11. Determine whether to allow ‘Zoom On Click’. Default: true.

WZoom.create(element, {
  zoomOnClick: false,
  zoomOnDblClick: true,
});

12. Determine whether to watch for the source image changes. Default: true.

WZoom.create(element, {
  watchImageChange: false
});

13. Determine how to align the content: `center`, `left`, `top`, `right`, or `bottom`. Default: ‘center’.

WZoom.create(element, {
  alignContent: 'right'
});

14. Determine whether to enable smooth extinction. Default: true.

WZoom.create(element, {
  smoothExtinction: false
});

15. Determine whether to disable the plugin. Default: false.

WZoom.create(element, {
  disableWheelZoom: true
});

16. Determine whether to reverse the wheel direction. Default: false.

WZoom.create(element, {
  reverseWheelDirection: true
});

Changelog:

v9.0.1 (02/04/2024)

  • dependencies upgraded

v9.0.0 (12/23/2023)

  • Moved DragScrollableOptions to the common list of options

v8.1.0 (09/26/2023)

  • Bugfixes

v8.0.0 (06/25/2023)

  • New scale calculation method

v7.0.2 (06/09/2023)

  • bugfix

v7.0.1 (05/31/2023)

  • combined the logic of construct options

v6.24.0 (04/18/2023)

  • renaming and refactoring drag scrollable module, new observers

v6.22.0 (04/05/2023)

  • disable smoothExtinction for touch devices

v6.21.0 (01/15/2023)

  • refactor

v6.20.0 (01/13/2023)

  • refactor

v6.19.0 (01/12/2023)

  • changed contract for prepare and rescale options

v6.18.5 (01/11/2023)

  • Update

v6.18.2 (01/07/2023)

  • Update

v6.18.1 (11/06/2022)

  • Update

v6.17.2 (10/16/2022)

  • Update

v6.16.0 (09/25/2022)

  • Update

v6.15.0 (09/16/2022)

  • Added reverseWheelDirection option

v6.14.0 (09/04/2022)

  • update

v6.13.0 (08/22/2022)

  • added method zoomUpToPoint and zoomDownToPoint

v6.11.0 (03/29/2021)

  • added method maxZoomUpToPoint and some change

v6.10.0 (08/02/2021)

  • changed value of type of smoothExtinction option

v6.9.0 (07/12/2021)

  • added .maxZoomUp() and .maxZoomDown() methods

v6.8.1 (07/10/2021)

  • added smoothExtinction option

v6.7.3 (07/08/2021)

  • bugfix

v6.6.1 (06/11/2021)

  • bugfix

v6.6.0 (04/22/2021)

  • support for zoom and pinch on touch screen devices

v6.5.1 (04/20/2021)

  • fixed mobile scrolling

v6.5.0 (03/16/2021)

  • target can be html element now

v6.4.1 (02/06/2021)

  • fix multiply init

v6.3.0 (11/12/2020)

  • refactoring and add support “hot” change src of image

v6.2.1 (11/07/2020)

  • bug fixed

v6.2.0 (09/12/2020)

  • added zoomOnClick option

v6.1.1 (09/05/2020)

  • Bugfix

v6.0.1 (06/20/2020)

  • Bugfix

v5.0.9 (06/20/2020)

  • Bugfix

v4.3.4 (06/06/2020)

  • Bugfix

v4.3.2 (05/30/2020)

  • DragScrollable supported touch

v4.2.0 (05/17/2020)

  • Added callbacks for DragScrollable module and soomth extinction at moving ended

v4.1.2 (05/09/2020)

  • restruct

v4.0.0 (03/15/2020)

  • changed target dir

v4.0.0 (03/15/2020)

  • changed target dir

v3.2.0 (02/15/2020)

  • bugfix (mousewheel in FF)

You Might Be Interested In:


2 thoughts 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
  2. Ardend

    It seems to only target HTML selectors, how can I target an element by class or ID?

    Reply

Leave a Reply