A Fantastic jQuery Zoom & Pan Plugin | zoom.jquery

jQuery ZOOM plugin, for the proper working of this plugin, please use the CSS Recommended definitions for Parent / Child items. A highly customizable jQuery Zoom & pan plugin for moving and zooming an item using mouse drag and mouse wheel.

Key Features:

Drag to move.
Mouse wheel to zoom in / out.
Custom zoom level.
Zoom in / Zoom out custom controls.
Items are allowed to be ignored.

How to make use of it:

1. Include jquery.zoom.css contained in the head tag and jquery.zoom.js after jQuery.

<link rel="stylesheet" href="/path/to/css/jquery.zoom.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/zoom.jquery.js"></script>

2. Include the most recent jQuery mousewheel plugin if you have to zoom in/out the component utilizing the mouse wheel.

<script src="/path/to/cdn/jquery.mousewheel.min.js"></script>

3. Add your zoomable & pannable component (an SVG world map on this instance) to the zoom area.

<div class="maps-container-inner zoomedElement">
  <div class="maps-zoomed-container">
    <div class="map-image" id="map-all" style="display:block;">
      // Add Image Here
    </div>
  </div>
</div>

4. Attach the plugin to the zoom container.

let zoomMap = $('.maps-container-inner').<a href="#!">Zoom</a>Area({
    // options here
});

5. Add customized zoom in/out controls to the zoom container.

<div class="map-control-zoomin"></div>
<div class="map-control-zoomout"></div>

let zoomMap = $('.maps-container-inner').ZoomArea({
    externalIncrease: '.map-control-zoomin',
    externalDecrease: '.map-control-zoomout'
});

6. Determine the animation technique used for setting the left/top/scale values.

let zoomMap = $('.maps-container-inner').ZoomArea({
    usedAnimateMethod: 'jquery'
});

7. Determine whether or not to show a digital scrollbar.

let zoomMap = $('.maps-container-inner').ZoomArea({
    virtual<a href="#!">Scroll</a>bars: false
});

8. Determine whether or not to show a digital scrollbar.

let zoomMap = $('.maps-container-inner').ZoomArea({
    virtualScrollbars: false
});

9. More configuration choices with default values.

let zoomMap = $('.maps-container-inner').ZoomArea({

    // element class
    elementClass: '',

    // enable draggable
    enableDrag: true,

    // display the object on the front of any element
    enableBringToFront: false,

    // customize the offset relative to the parent
    left: null,
    top: null,
    width: null,
    height: null,

    // overflow property
    parentOverflow: 'visible',

    // zoom object centered on mouse anchor point
    mouseSensibleZoom: true,
    
    // classes to hide while animating
    hideWhileAnimate: ['hideWhileAnimate'],

    // duration in ms
    animateTime: 300,

    // customize the offset of the parent container
    parent_left: null,
    parent_top: null,
    parent_width: null,
    parent_height: null,

    // except elements here (CSS classes)
    exceptionsZoom: ['noZoom'], 
    exceptionsWholeZoom: ['overset-text'],
    exceptionsDrag: ['noDrag'], 
    
    // custom zoom level control
    externalZoomLevel: '#zoom-level'

});

10. Callback capabilities.

let zoomMap = $('.maps-container-inner').ZoomArea({

    onBeforeLoad: null,
    onAfterLoad: null,
    onBeforeZoom: null,
    onAfterZoom: null,
    onBeforeDrag: null,
    onAfterDrag: null

});

Any Element Zoom & Pan Plugin, jQuery ZOOM Plugin/Github