PHP

Settings the notes-file:

If you want to change the path to the notes or use another extension, you can change it in php.

new note('[path]', [prefix], '[image]', '[extension]');

Images

Simple images:

Using jQuery-Notes in HTML.
If you want to add different notes to the same image, just add a parameter to the image-path.

<img src="[image-path]?[parameter]" alt="" class="[css-class]"

width="[width-px]" height="[height-px]" />

Linked images:

Surrounding links will be added as a linked icon to the controls under the image.

<a href="[link]" title="[link-title]">

<img src="[image-path]?[parameter]" alt="" class="[css-class]"

width="[width-px]" height="[height-px]" />

</a>

Samples

Settings:

All settings and their default values.

$(function() {

$('.jquery-note').jQueryNotes({

minWidth: 50,

minHeight: 50,

maxWidth: '',

maxHeight: '',

aspectRatio: false,

allowAdd: true,

allowEdit: true,

allowDelete: true,

allowHide: true,

allowReload: true,

allowLink: true,

allowAuthor: true,

dateFormat: 'Y/D/M H:I',

hideNotes: false,

loadNotes: true,

helper: '',

maxNotes: null,

operator: 'jquery-notes_php/notes.php'

});

});

Size:

The size can be set in pixel or percent.

$(function() {

$('.jquery-note').jQueryNotes({

minWidth: 50,

minHeight: 50,

maxWidth: '',

maxHeight: '',

aspectRatio: false,

});

});

Sample:

Images from your own web hosting server.
Notes can be edited by right click.
Number of notes is limited.
Cause of spamming, I disabled short URLs.

$(function() {

$('.jquery-note').jQueryNotes({

maxNotes: 10

});

});

Look:

You may change the look by using a helper-class for your own css.
Links are deactivated in this sample.
By using a parameter, this image can contain other notes then the one above, event it's the same one.

$(function() {

$('.jquery-note').jQueryNotes({

minWidth: '10%',

minHeight: 20,

aspectRatio: true,

helper: 'helper-class',

allowLinks: false,

dateFormat: 'D.M.Y'

});

});

Foreign images:

You can also add notes to foreign images (for example flickr) if you place them on your website.
All options are deactivated in this sample.

$(function() {

$('.jquery-note').jQueryNotes({

allowAdd: false,

allowEdit: false,

allowDelete: false,

allowHide: false

});

});

Image-size:

You can use the image in any size your want to.
Containing notes will be automatically scaled.