A small ES6 module to add simple panning and zooming functionality to any DOM element. It Includes cascading containers and the possibility of bounds (inner or outer). Handle touch events on touch devices. Only for modern borwsers.
You can see here some demos.
Import from an ES6 module and initialize after DOMContentLoaded event.
<script type="module">
import {panzoom} from 'https://cdn.jsdelivr.net/gh/cmorillas/panzoom/src/panzoom.js';
document.addEventListener("DOMContentLoaded", (e) => {
panzoom('#element');
});
</script>panzoom(Selector, Options);
| Parameter | Type | Description |
|---|---|---|
Selector |
String | CSS Selector |
Options |
Object | Initialization options |
| Name | Possible Values | Default Value | Description |
|---|---|---|---|
pan |
true | false | true | do panning |
zoom |
true | false | true | do Zooming |
bound |
'inner' | 'outer' | 'none' | 'inner' | containment whitin the parent container |
wheel_step |
0.01 - 0.4 | 0.2 | mouse wheel speed |
scale_min |
0.01 - 20 | 0.01 | minimum zoom |
scale_max |
0.01 - 20 | 10 | maximum zoom |
<!doctype html>
<html lang="en">
<head>
<script type="module">
import {panzoom} from 'https://github.com/cmorillas/panzoom/src/panzoom.js';
document.addEventListener("DOMContentLoaded", (e) => {
panzoom('#element');
});
</script>
</head>
<body>
</body>
</html>See the above code in action at https://codepen.io/taye/pen/tCKAms
panzoom.js is released under the GPL-3.0 License.