Flick-style Image Annotation Plugin For jQuery

A Flick-style, AJAX-enabled image annotation plugin which allows to dynamically create/edit/remove Flickr-like interactive comments (note, markers) on your images.

How to use it:

1. Load the necessary jQuery and jQuery UI libraries in the html document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Load the jQuery Image Annotation's JavaScript and CSS files in the document.

<link href="css/annotation.css" rel="stylesheet">
<script src="js/jquery.annotate.js"></script>

3. Add custom annotations to your images using notes array as this:

$("#img-to-annotate").annotateImage({
  useAjax: false,
  notes: [{ 
    "top": 286,
    "left": 161,
    "width": 52,
    "height": 37,
    "text": "Text-1",
    "id": "id-1",
    "editable": false 
  },{ 
    "top": 134,
    "left": 179,
    "width": 68,
    "height": 74,
    "text": "Text-2",
    "id": "id-2",
    "editable": true 
  }]
});

4. Add/edit/remove image annotations via AJAX requests.

$("#img-to-annotate").annotateImage({
  getUrl: 'your-get.rails',
  saveUrl: 'your-save.rails',
  deleteUrl: 'your-delete.rails'
});

5. Prevent your users from editing the image annotations.

$("#img-to-annotate").annotateImage({
  editable: false
});

---

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