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.