Panzoom
A library for panning and zooming elements
Install / Use
/learn @cmorillas/PanzoomREADME
Panzoom 
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.
Demos
You can see here some demos.
Installation
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>
Usage
panzoom(Selector, Options);
| Parameter | Type | Description |
| :--- |:--- |:--- |
| Selector | String | CSS Selector |
| Options | Object | Initialization options |
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 |
Example
<!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
License
panzoom.js is released under the GPL-3.0 License.
Related Skills
node-connect
342.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
84.7kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
342.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
commit-push-pr
84.7kCommit, push, and open a PR
