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
See Demo And Download
Official Website(kotelesroberto): Click Here
This superior jQuery/javascript plugin is developed by kotelesroberto. For extra Advanced Usages, please go to the official website.
Be First to Comment