Any Element Zoom & Pan Plugin - zoom.jquery.js

A highly customizable jQuery zoom & pan plugin for panning and zooming an element using mouse drag and mousewheel.

Overview:

• Drag to pan.
• Mousewheel to zoom in/out.
• Custom zoom level.
• Custom zoom in/out controls.
• Allows to ignore elements.

How to use it:

1. Include jquery.zoom.css inside 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 latest jQuery mousewheel plugin if you need to zoom in/out the element using mouse wheel.

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

3. Add your zoomable & pannable element (an SVG world map in this example) 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;">
      <img src="world.svg" alt="World map"/>
    </div>
  </div>
</div>

4. Attach the plugin to the zoom container.

let zoomMap = $('.maps-container-inner').ZoomArea({
    // options here
});

5. Add custom 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 method used for seting the left/top/scale values. Default: 'css'.

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

7. Determine whether to show a virtual scrollbar. Default: true.

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

8. Determine whether to show a virtual scrollbar. Default: true.

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

9. More configuration options 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 functions.

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

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

});

---

This awesome jQuery plugin is developed by kotelesroberto. For more Advanced Usages, please check the demo page or visit the official website.