Image Zooming

Having spent some time investigating image zooming, I decided that panzoom was probably the best - albeit with some caveats yet to be resolved.

link : https://github.com/anvaka/panzoom?tab=readme-ov-file#panzoom-

Pros

Best feeling UX
Mouse wheel capable
Mobile touch capable
Good zooming in to/out of a point

Cons

Gallery functionality missing - so swipe left/right is not supported (a significant issue for most peoples UX)

Installation

Either npm install panzoom --save or use or download the following link:

html

<script defer src='https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js'></script>

Implementation

js

var _pan; // Global variable declaration

showZoomingImg(document.querySelector('img'));

function showZoomingImg(imgElem) {
   _pan = panzoom(imgElem, {
                      bounds       : true,
                      boundsPadding: 0.3, // Preferred zoom options
                      maxZoom      : 40, // Preferred zoom options
                      minZoom      : 0.5, // Preferred zoom options
                      initialX     : 0, // Preferred zoom options
                      initialY     : 50, // Preferred zoom options
                      initialZoom  : 0.8 // Preferred zoom options
                      }