Simple Image Zoom And Annotation Plugin For jQuery - ZoomMarker

Simple Image Zoom And Annotation Plugin For jQuery - ZoomMarker

ZoomMarker is a simple jQuery plugin which enables you to zoom in/out images with mouse wheel and to place custom markers on the images as per your needs.

1. Include the needed jQuery library and jQuery mousewheel plugin on the web page.

<script src="/path/to/jquery.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. 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);
  }
});

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

  • Publication date: 27.10.2017
  • Source