Description

This plugin allows you to add textual annotations to images by select a region of the image and then attach a textual description, the concept of annotating images with user comments.
Integration with JQuery Image Annotation from Chris (http://www.flipbit.co.uk/jquery-image-annotation.html) with PHP support from GitHub (http://github.com/stas/jquery-image-annotate-php-fork).

Live Demo:

Needs Your Support:

It is hard to continue development and support for this free plugin without contributions from users like you. If you enjoy using demon Image Annotation and find it useful, please consider making a donation. Your donation will help encourage and support the plugin’s continued development and better user support. Donate

Some features:

Option to approve, edit and remove image notes in admin page.

Preview image annotation in admin page.

Auto insert unique id attribute for all the images for image note.

Option to allow image annotation for login user who can moderate comment only

Gravatar in the notes

Option to sync with wordpress comments.

Option to show thumbnail in comment list.

‘Mouseover to load notes’ on top of every image note (editable).

‘Link’ on top of every image note if hyperlink image (editable).

There’s a new method to exlcude image annotation after version 3, but previous version method id=”img-exclude” still work.

Image preview for admin editing is only support version 3 and above, image note added with previous version will not support.

Screenshots

Demonstration of demon image annotation.

Demonstration of demon image annotation.

Image annotation settings.

Image annotation table list.

Image annotation editing.

Installation

Installation

Put the plugin folder into [wordpress_dir]/wp-content/plugins/

Go into the WordPress admin interface and activate the plugin

Choose the settings you want in demon-image-annotation settings.

How to use

First enter div wrapper id or class in settings where your post content appear, or else the plugin can’t find the wrapper to start.

Example (.entrybody)

To embed annotations and comments on images, your img tag must have id attribute value start with ‘img-‘, this plugin already did the trick if you enable Auto Generate Image ID option.

If you wish to add an id attribute maunally, here is the guide on how to insert id attribute to img tag.
– First disable Auto Generate Image ID option
– Add an id attribute start with ‘img-‘ follow by unique id to img tag.
– All the images must have unique and different id or else you will get the same comments.

Example (img-4774005463)

Decide the option for WordPress Comments setting.

Sync with wordpress comments:
– image note sync with wordpress comment database
– modified comment will auto update both database
– deleted comment from wordpress comment will not sync, have to delete manually in image notes table list.
– new image note from annoymous will auto add into wordpress comment as waiting approval.
– the image note only publish when the comment is approve.

Pls note if you switch the option, the comments added with previous option will not load.

Usage:

Disable Add Note button:
Add an addable attribute with value “false” to disable the add note button, but image notes still viewable.
Login User who can Moderate Comments still able to see Add button option.

Installation

How to use

First enter div wrapper id or class in settings where your post content appear, or else the plugin can’t find the wrapper to start.

Example (.entrybody)

To embed annotations and comments on images, your img tag must have id attribute value start with ‘img-‘, this plugin already did the trick if you enable Auto Generate Image ID option.

If you wish to add an id attribute maunally, here is the guide on how to insert id attribute to img tag.
– First disable Auto Generate Image ID option
– Add an id attribute start with ‘img-‘ follow by unique id to img tag.
– All the images must have unique and different id or else you will get the same comments.

Example (img-4774005463)

Decide the option for WordPress Comments setting.

Sync with wordpress comments:
– image note sync with wordpress comment database
– modified comment will auto update both database
– deleted comment from wordpress comment will not sync, have to delete manually in image notes table list.
– new image note from annoymous will auto add into wordpress comment as waiting approval.
– the image note only publish when the comment is approve.

Pls note if you switch the option, the comments added with previous option will not load.

Usage:

Disable Add Note button:
Add an addable attribute with value “false” to disable the add note button, but image notes still viewable.
Login User who can Moderate Comments still able to see Add button option.