jQuery Image Annotation Plugin
Tuesday, 17 March 2009
Flickr was the first site to widely introduce the concept of annotating images with user comments. This concept was first pioneered by the Fotonotes JavaScript library, and has since been further popularised by Web 2.0 sites like Facebook.
When my current client asked my to integrate simlar functionality into there site, I started to look around for a jQuery plugin that could provide this, but none was available. The Image Annotate library for Drupal is based upon jQuery UI however, so taking this for a base, I adopted it to just use jQuery 1.2.6.
You can see a live example here.
Using the plugin is straight forward, simply hookup the plugin an call the imageAnnotate function on the image you would like to annotate.
<html>
<head>
<style type="text/css" media="all">@import "/css/annotation.css";</style>
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.5.3.min.js"></script>
<script type="text/javascript" src="/js/jquery.annotate.js"></script>
<script language="javascript">
$(window).load(function() {
$("#toAnnotate").annotateImage({
editable: true,
useAjax: false,
notes: [ { "top": 286,
"left": 161,
"width": 52,
"height": 37,
"text": "A read only annotation",
"editable": false },
{ "top": 134,
"left": 179,
"width": 68,
"height": 74,
"text": "An editable annotation",
"editable": true } ]
});
});
</script>
</head>
<body>
<div class="main-content">
<img src="/images/annotated.jpg" id="toAnnotate" />
</div>
</body>
</html>
The plugin requires jQuery 1.2.6 and jQuery UI with resiable and draggable options included. A saveAsHtml method is available in order to generate a dynamic HTML form with which to save the annotations back to the server.
AJAX Version
EDIT: see this post for server side code.
As well as operating in a static HTML mode, the plugin can load, update and delete annotations using AJAX calls. Specifying Get, Save and Delete URLs, plus setting the useAjax flag to true.
$(window).load(function() {
$("#toAnnotate").annotateImage({
getUrl: "get.rails",
saveUrl: "save.rails",
deleteUrl: "delete.rails",
useAjax: true
});
});
The Get url expects data to be returned as an JSON stream.
[ { "top": 286,
"left": 161,
"width": 52,
"height": 37,
"text": "Small people on the steps",
"id": "e69213d0-2eef-40fa-a04b-0ed998f9f1f5",
"editable": false },
{ "top": 134,
"left": 179,
"width": 68,
"height": 74,
"text": "National Gallery Dome",
"id": "e7f44ac5-bcf2-412d-b440-6dbb8b19ffbe",
"editable": true } ]
Window Load Event
When calling the plugin it is important to use the $(window).load() event. This event fires after the page an all it's images have loaded. The $(document).ready() event fires after the page has loaded, but before the browser has retrieved all the images. Calling the plugin in this event will result in the plugin rending a blank DIV as the image hasn't loaded.
36 Comments:
hi, i use your jquery annotation, but with jquery 1.3.2 and
jquery ui-1.7.1 the add and edit function work very well, but when i have resize the box nothing happen, i want your help for this matter. thanks
Hi Hardlick - I'm currently updating the plugin to use jQuery 1.3.2 and should have is available to download next week!
Hi Chris, How retrieve you annotations in the save.html?
Solved, In my save.jsp the parameters can get by means getParameter("text") getParameter("top") etc etc
Thanks at all
longing for jquery 1.3.2 and jquery ui-1.7.1 compability... :) thanks for a great product!
A sample server side AJAX handler can be seen here.
this rocks. thanx.
terrific!
is there a way to save the »comments« through a php file?
this is a great plugin
I think there is a bug with the version for jquery 1.3.2
because it seems like containement for resize is not working
correctly : you can resize a note outside the image
I try to use it with several images per html page
but it didn't work and all images are hidden
does your plugin support several images to
annotate per page ?
Yours, Patrick
This post has been removed by the author.
For the bug with containement of resizable element with jquery 1.3.2, see
http://dev.jqueryui.com/ticket/4199
and
http://dev.jqueryui.com/ticket/4349
Firstly, thank you so much for this script it's phenomenal. I do have a question which I hope you can find the chance to answer. You mention there is a saveAsHtml method - what I'm trying to output the annotation data into visible form elements - does the saveAsHtml have the ability to print text, top etc into an html form? Thanks Chris.
Hi, great plug in, i have a question, i´m trying use this plug with php but when try save in bd the words : "text" and "left" in mysql this words are reservate and not let me save , how to change the values to the notes, for example change "left" by "left_a"
Hi Julio, I don't program in PHP but in ASP.NET I translate the HTTP values into different variables for storage in the database.
If you can’t do this, maybe you could escape the reserved words, see http://mail.python.org/pipermail/db-sig/2007-August/005172.html
Hi, thanks, my error is my sql, but is ready, i´m have other question, exist some type error or limitation if i´m trying send parameter with this format:
getUrl: "get.php?ap=22",
because my page not return never, but if set the JSON the format static:
[{'top':'30','left':'30','width':'30','height':'30','text':'asas','id':'14','editable':'true'}]
if operate, apparently never send the parameter
Very thanks, and sorry so many questions
Hi, Cris, the solution is sessions, thanks!! great plugin!!! :P
1. $(window).load(function() {
2. $("#toAnnotate").annotateImage({
3. getUrl: "get.rails",
4. saveUrl: "save.rails",
5. deleteUrl: "delete.rails",
6. useAjax: true
7. });
8. });
from this code the saveUrl: how to implement ?? in pure ASP.NET ??
i'm not sure how to use saveURL and delteURL
the getURL is something like expect something like this ??
"
[{'top':'30','left':'30','width':'30','height':'30','text':'asas','id':'14','editable':'true'}]"
can someone show a simpler way to get save the data into sql server ?
Hi Chris! First of all,great plugin! Thank you! I use it now for one of my projects.But there is a problem which i cant work out cuz i dont know what is wrong actually.So i hope you can help me out?
The problem is that.. when i try to resize the box i can resize it EVEN further than the whole image,which is not what i want.In your live demo page,this problem doesnt exist,but in my page it exists and i dont know what is the problem?
Nevermind! I figured it out,now it works like a charm!
keep up the good work
Hi Chirs, fantastic!
I need a way of changing the way of apply the position to both the edit and the view, where is this set, apart from the css file?
Save me some work but it does not work with jQUery.dialog or an image bigger than the container(auto scrolling).
Hi Chris,
excellent plug-in!
I want to suggest two improvements:
1st: It would be great to add new annoations on Click-events (at click position with default size) or click-and-drag-events (to define position and size). This would greatly increase the desirability.
2nd: It would also be nice to drag annotations without selecting them first.
Besides this minor points: Really nice!
Thanks a lot for your work!
Hi,
I ported the api part into PHP.
Check it out:
http://github.com/stas/jquery-image-annotate-php-fork
Thanks.
Hi,
Can some one explain me how I can store and retrieve annotation data from database (sql server) using only asp.net, c#?
A complete client side and server side example will be great.
Thanks in advance.
Hi,
I am using this plug in for annatating many images in a html page.but when i click add note which open annotation window , the page is reloading.Can't we avoid this.i mean annotation should open with out reloading the page
Plugin looks great.
I have two feature requests:
- Add note quickly by double clicking a region on the image, which will place a new, empty note box where you clicked.
- Maintain tabbing in the Note popup box. After typing a note I have to put my hand back on my mouse and click OK. I'd much rather hit Tab+Enter, seeing as my hands are already on my keyboard.
Also, the non-standard resize cursor is a little jarring. However, I suspect this can be easily modified.
Regards
Stew
Great plugin!
The code below fixes the resize containment bug where it sets the width/height of the note to the width/height of the canvas when you try and resize top/left < 0.
if(parseInt(area.position().top) < 0)
{
area.height(ui.originalPosition.top + ui.originalSize.height).css('top', 0);
}
if(parseInt(area.position().left) < 0)
{
area.width(ui.originalPosition.left + ui.originalSize.width).css('left', 0);
}
Cheers,
Dave
I can't wait to try this out... but I feel a little ignorant, because I uploaded it to the plugins folder but don't see it my plugins page. How can I install/activate it?
how to store the coordinates and the text in the database
I'm looking for the same things as a few of us, I display an image from the database in an IBOX, but once I annotate it, I need to save he annotated version back to the database ... (In my case SQL Server),
any ideas on how to do this? .
Is it possible to have more than 1 picture in the same page with individual 'Add note' buttons?
Frickin' awesome.
Any idea how to go about making the entire annotation box link to somewhere else? (like in Facebook images, where you can click on someone's face to go to their profile)
it works great, but i have small issue, when i try to select part of image, i can even select out of image actual area. Its not possible in original image, but page on which i am working, i can select outside of the image as well. any idea how to fix this?
would be really useful to know how to save to from from SQL. wanting to build an asp.net app. any suggestions?
Can anyvody tell me how to save the parameters (id, height...) to mysql and load them from the db instead of the get.html?
THX
Post a Comment
Subscribe to Post Comments [Atom]
<< Home