This time I will share jQuery Plugin and tutorial about Flick-style Image Annotation Plugin For jQuery, hope it will help you in programming stack.
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.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/jquery-ui.min.js"></script> |
2. Load the jQuery Image Annotation’s JavaScript and CSS files in the document.
1 |
<link href="css/annotation.css" rel="stylesheet"> |
2 |
<script src="js/jquery.annotate.js"></script> |
3. Add custom annotations to your images using notes array as this:
01 |
$("#img-to-annotate").annotateImage({ |
4. Add/edit/remove image annotations via AJAX requests.
1 |
$("#img-to-annotate").annotateImage({ |
2 |
getUrl: 'your-get.rails', |
3 |
saveUrl: 'your-save.rails', |
4 |
deleteUrl: 'your-delete.rails' |
5. Prevent your users from editing the image annotations.
1 |
$("#img-to-annotate").annotateImage({ |
This awesome jQuery plugin is developed by flipbit. For more Advanced Usages, please check the demo page or visit the official website.
