Simple Image Zoom And Annotation Plugin For jQuery - ZoomMarker

Simple Image Zoom And Annotation Plugin For jQuery - ZoomMarker
File Size: 1.04 MB
Views Total:
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">

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 () {
    src: "image-to-zoom.jpg",
    rate: 0.2, // from 0 to 1
      {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

// zoom an image
$('#viewArea').zoomMarker_Zoom(center, scale);

// get image size

// enable draggable

// make the marker always in front of elements

// reset image

// get canvas

// clear canvas

// move marker
$('#viewArea').zoomMarker_Move(x, y);

// clear marker

// remove marker

// add custom image markers
  hint: {
    value: '',
    style: {}
  dialog: {
    value: '',
    style: {},
    offsetX: 0,
    offsetY: 0

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



  • Added resetImage method.


  • Bugfixed for mobile.


  • added more options


  • added canvas layer where you can paint your own image.


  • Bugfix


  • Bugfix


  • Added an option which allows to drag the zoom


  • fixed for jQuery 3+


  • centering images.


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