Simple Image Zoom And Annotation Plugin For jQuery - ZoomMarker

Simple Image Zoom And Annotation Plugin For jQuery - ZoomMarker
File Size: 296 KB
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">
</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:

{
  rate: 0.2,
  src: null, 
  width: 500,
  min: 300,
  max: null,
  markers: [],
  marker_size: 20
}

6. API methods.

// load an image to the document
$('#viewArea').zoomMarker_LoadImage("img/rail.jpg");

// clear image markers
$('#viewArea').zoomMarker_CleanMarker();

// add custom image markers
$('#viewArea').zoomMarker_AddMarker({
  src:"img/marker.png", 
  x:320, 
  y:180, 
  size:20, 
  click:function(e){
    alert(e);
  }
});

Change log:

2017-11-14

  • centering images.

2017-11-12


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