A Derby JS component for jQuery Panzoom.

Usage no npm install needed!

<script type="module">
  import dPanzoom from 'https://cdn.skypack.dev/d-panzoom';


Derby Panzoom

A Derby JS component for jQuery Panzoom. Refer to the jQuery Panzoom docs for details about options and events.


$ npm install d-panzoom --save


This component requires jQuery Panzoom in order to work. It does not include the script for you. You must include it on the page.


Create a view:

<index: element="panzoom">
  <img alt="" as="image" src="{{@src}}">
  <button on-click="zoom()" type="button">Zoom in</button>
  <button on-click="zoom(true)" type="button">Zoom out</button>
  <label>Slide to zoom in or out</label>
  <input as="range" type="range">
  <button on-click="reset()">Reset</button>

Associate the view with the component:

app.use('panzoom', require('d-panzoom'));

Use the view:

  <script src="jquery.panzoom.js">

  <view name="panzoom" minScale="1" maxScale="5" src="..."></view>