Drag & Drop Image Marker Plugin For jQuery - image-marker.js

image-marker.js is a jQuery Image Annotation plugin which adds custom, editable and draggable markers to your image and saves all markers on client side using Window.localStorage API.

How to use it:

1. Load the needed jQuery and jQuery UI in the document.

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui.css">

2. Download and load the image-marker.js script after jQuery library.

<script src="jquery.image-marker.js"></script>

3. Create an element for the plugin.

<div id="element"></div>

4. Create the buttons to add new markers and save the current data to your local storage.

<div id="add_pos_marker">Add Positive dot</div>
<div id="add_neg_marker">Add Negative dot</div>
<div id="save">Save</div>

5. Initialize the image marker plugin and specify the path to your image.

var imageMarker = $("#element").imageMarker({
    src: '1.jpg'
});

6. Activate the actions buttons:

if (!!window.localStorage.markers) {
  JSON.parse(window.localStorage.markers).forEach(function(m) {
    $(imageMarker).trigger('add_marker', m);
  })
}

$('#add_neg_marker').click(function() {
  $(imageMarker).trigger('add_marker', {
    className: 'yello'
  });
});

$('#add_pos_marker').click(function() {
  $(imageMarker).trigger('add_marker', {
    content: 'Content for mock marker should be a bit longer, longer, longer... ok that`s it.',
    className: 'green'
  });
});

$('#save').click(function() {
  $(imageMarker).trigger('get_markers', function(data) {
    window.localStorage.markers = JSON.stringify(data);
  });
});

7. Enable/disable the 'draggable' functionality.

var imageMarker = $("#element").imageMarker({
    src: '1.jpg',
    drag_disabled: false
});

---

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