Annotate Anything with ZURB's JavaScript Annotation Plugin

wrote this on in . 6 reactions

Check out the ZURB JavaScript Annotation Plugin »

Our latest application Verify allows you to collect user feedback through interactive tools. Most of these tools require the user to annotate an image so we came up with a single plugin we could use for the entire app.

The plugin uses jQuery and makes it dead simple to add and save image annotations.

Hop right on over to the ZURB playground to see a demo and the full documentation. The code playground is where we do crazy awesome stuff with JavaScript, HTML, and CSS.

Swing and a Miss
You're Design Thinking Too Much
Design pot
Design or Get Off the Pot

It has 21 comments.

Adam Meyer (ZURB) says

I love this... Id love to see the ability to move/ delete them, as well as add text, or at least a number to correspond to text.

Sacha (ZURB) says

Thanks for this, it looks promising. But maybe I'm missing something, or else it's not working properly for me... but what's the point if you can't add text? Or did you just decide to let the user decide what goes in the annotation?

Matt (ZURB) says


One of the advantages of defining the annotations in a callback function is that you have complete control over what elements get added.

On the playground page our examples are very simple, but if we were to say use this in an application (cough, Verify, cough), we would include a input element in our annotations.

Any text annotations would not be serialized with the default serialize function but if you peek at the source code you'll see that function just calls a couple other public functions. When we want to store more info then just the coordinates we define custom serialize function that pull in whatever other data we need from the annotations.

SFdude (ZURB) says

(cough, Verify, cough) ... so this was just a lame excuse to market your paid applications, right?

Just like the previous posters before me said: >> ...but what's the point if you can't add text?

Why don't you show a complete, reproducible, clear example of code, to annotate with user TEXT?

I'm letting you off easy because of Nutmeg, I'm a dog person myself. Don't leave your Blog readers hanging...


Bryan (ZURB) says

Wait a second, you're accusing us of marketing our business? The shame! And we're not giving out all the secrets! Wow, very poor marketing! Mutiny I say!

Marcus Tucker (ZURB) says

Sounds cool and has promise but your "annotate anything" plugin examples don't actually annotate anything, they just leaves circles or tag icons. The definition of "annotate" is "To furnish (a literary work) with critical commentary or explanatory notes; gloss." - i.e. to enter text! And the "Passing attributes" example doesn't seem to do anything at all.

So either your plugin is badly/misleadingly named (because it doesn't actually enable annotations to be entered), or it's unfinished.

If you've already implemented full annotations in your commercial product why not incorporate the functionality into the plugin?

Stefan (ZURB) says

Hi guys,

Thanks for that useful piece of code. if you remove the timestamp/responsetime stuff it will run noticeably faster.

thumbs up!

jim (ZURB) says

cough.. cough.. lame excuse? whoa..
i completely agree with Zurb comments.. very well done example with very well done marketing without all of the typical lame b.s. on other websites... cheers to Zurb for presenting this!

dbone (ZURB) says

Annotate : to make annotations or notes.
Don't think putting a marker on a photo comes close. Certainly not useful in this form

tommy (ZURB) says

Hmmm..really confused about the product. The product is suppose to allow you to annotate? I was even more confused over at the Verify site...what do they do? there was nothing in regards to Annotate. strange and confusing that suppose ot be part of the marketing plan? Just wondering.

Josh Crowder (ZURB) says

Great plugin,

I am a little stuck on how to get it to return the x and y and position on the event thats called.

How can I pass back the results to annotationCallback?

Matt (ZURB) says

Josh: The plugin does not include a click event, on the demo page we use .seralizeAnnotations() to get an array of objects with the x and y coordinates.

If you wanted to pull these on an event you would just need to call .seralizeAnnotations() in the callback you defined for your event.

Check out the seralizeAnnotations(), relativeX() and relativeY() methods in the plugin source if you need more advanced functionality. relativeX() and relativeY() can be called directly from outside the plugin and may be what you are looking for.

Umesh (ZURB) says

I have saved added annotations into database. And I want to show this annotations dynamically(using AJAX) on the image, but I am having one problem that only last annotation is displayed on image not all. Don't know whats going wrong?


Josh (ZURB) says

Is there a way to allow for overlapping.

I'm using this plugin to create a spot the ball game.. but I need to be able to select points that are closer together rather than the size of the point apart.

Matt (ZURB) says

Josh: Not sure what your exact requirements are, but I don't think this plugin will work for that situation without a little modification.

Currently it only adds an annotation when the click target is the annotation container. You could change that logic so that click on the container and any child elements will add an annotation.

You will also need to make sure the position of the click is always calculated relative to the container, and not the element clicked. This existing code assumes that clicks are on the container.

online jobs (ZURB) says

interesting i like it

online jobs (ZURB) says

interesting i like it