Simple Image Zoom And Annotation Plugin For jQuery - ZoomMarker
File Size: | 1.07 MB |
---|---|
Views Total: | 12574 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

ZoomMarker is a simple jQuery plugin which enables you to zoom in/out images with mouse wheel and touch gestures and to place custom markers on the images as per your needs.
How to use it:
1. Include the needed jQuery library, jQuery mousewheel plugin and hammer.js on the web page.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/hammer.min.js"></script> <script src="/path/to/jquery.mousewheel.min.js"></script>
2. The required HTML structure.
<div id="picview" class="picview"> <img src="image-to-zoom.jpg" name="viewArea" id="viewArea" draggable="false"> </div>
3. Include the jQuery ZoomMarker plugin's JavaScript and CSS files on the page.
<link rel="stylesheet" href="css/zoom-marker.css"> <script src="js/zoom-marker.js"></script>
4. Initialize the ZoomMarker plugin on document ready and add your own markers to the image as follows:
$(document).ready(function () { $('#viewArea').zoomMarker({ src: "image-to-zoom.jpg", rate: 0.2, // from 0 to 1 markers:[ {src:"marker.png", x:500, y:500}, {src:"marker.png", x:200, y:200}, {src:"marker.png", x:1280, y:720, size:20}, ] }); })
5. All possible plugin options:
{ // mouse scroll speed rate: 0.2, // path to image src: null, // width width: 500, // min width min: 300, // max width max: null, // predefined markers // {src:"marker.png", x:100, y:100, size:20, click:fn()} markers: [], // marker size marker_size: 20, // enable draggable enable_drag: true, // auto index auto_index_z: true, // enable cancas layer enable_canvas: false, // lock zoom zoom_lock: false }
6. API methods.
// load an image to the document $('#viewArea').zoomMarker_LoadImage("img/rail.jpg"); // zoom an image $('#viewArea').zoomMarker_Zoom(center, scale); // get image size $('#viewArea').zoomMarker_GetPicSize(); // enable draggable $('#viewArea').zoomMarker_EnableDrag(enable); // make the marker always in front of elements $('#viewArea').zoomMarker_TopIndexZ(); // reset image $('#viewArea').zoomMarker_ResetImage() // get canvas $('#viewArea').zoomMarker_Canvas(); // clear canvas $('#viewArea').zoomMarker_CanvasClean(); // move marker $('#viewArea').zoomMarker_Move(x, y); // clear marker $('#viewArea').zoomMarker_CleanMarker(); // remove marker $('#viewArea').RemoveMarker(markerID); // add custom image markers $('#viewArea').zoomMarker_AddMarker({ src:"img/marker.png", x:320, y:180, size:20, hint: { value: '', style: {} } dialog: { value: '', style: {}, offsetX: 0, offsetY: 0 } click:function(e){ alert(e); } });
7. Events.
$('#viewArea').on("zoom_marker_img_load", function(event, src){ // when the image stars loading }); $('#viewArea').on("zoom_marker_img_loaded", function(event, size){ // after the image has been loaded }); $('#viewArea').on("zoom_marker_click", function(event, markerObj){ // when a marker is clicked }); $('#viewArea').on("zoom_marker_mouse_click", function(event, mouseObj){ // when the image is clicked }); $('#viewArea').on("zoom_marker_move_end", function(event, x, y, markerObj){ // when move end });
Changelog:
2020-09-26
- Bugfixed for callback
2020-08-02
- Added events.
2019-06-23
- Bugfix
2019-04-11
- Added resetImage method.
2019-04-02
- Bugfixed for mobile.
2019-02-22
- added more options
2019-02-13
- added canvas layer where you can paint your own image.
2019-02-07
- Bugfix
2018-11-06
- Bugfix
2018-09-25
- Added an option which allows to drag the zoom
2018-07-24
- fixed for jQuery 3+
2017-11-14
- centering images.
2017-11-12
- JS & CSS update
This awesome jQuery plugin is developed by yeye0922. For more Advanced Usages, please check the demo page or visit the official website.