/panzoom

A library for panning and zooming elements

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

Panzoom version

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.