Author: | worka |
---|---|
Views Total: | 570 views |
Official Page: | Go to website |
Last Update: | June 25, 2023 |
License: | MIT |
Preview:

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', { 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 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 });
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:
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)
Hi, Thanks for the library!
With firefox using the mouse wheel I dont get the on image, working on chrome
It seems to only target HTML selectors, how can I target an element by class or ID?