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.

  1. 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.

  1. <img src="[image-path]?[parameter]" alt="" class="[css-class]"
  2. 	width="[width-px]" height="[height-px]" />

Linked images:

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

  1. <a href="[link]" title="[link-title]">
  2. 	<img src="[image-path]?[parameter]" alt="" class="[css-class]"
  3. 		width="[width-px]" height="[height-px]" />
  4. </a>

Samples

Settings:

All settings and their default values.

  1. $(function() {
  2. 	$('.jquery-note').jQueryNotes({
  3. 		minWidth: 50,
  4. 		minHeight: 50,
  5. 		maxWidth: '',
  6. 		maxHeight: '',
  7. 		aspectRatio: false,
  8. 		allowAdd: true,
  9. 		allowEdit: true,
  10. 		allowDelete: true,
  11. 		allowHide: true,
  12. 		allowReload: true,
  13. 		allowLink: true,
  14. 		allowAuthor: true,
  15. 		dateFormat: 'Y/D/M H:I',
  16. 		hideNotes: false,
  17. 		loadNotes: true,
  18. 		helper: '',
  19. 		maxNotes: null,
  20. 		operator: 'jquery-notes_php/notes.php'
  21. 	});
  22. });

Size:

The size can be set in pixel or percent.

  1. $(function() {
  2. 	$('.jquery-note').jQueryNotes({
  3. 		minWidth: 50,
  4. 		minHeight: 50,
  5. 		maxWidth: '',
  6. 		maxHeight: '',
  7. 		aspectRatio: false,
  8. 	});
  9. });

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.

  1. $(function() {
  2. 	$('.jquery-note').jQueryNotes({
  3. 		maxNotes: 10
  4. 	});
  5. });

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.

  1. $(function() {
  2. 	$('.jquery-note').jQueryNotes({
  3. 		minWidth: '10%',
  4. 		minHeight: 20,
  5. 		aspectRatio: true,
  6. 		helper: 'helper-class',
  7. 		allowLinks: false,
  8. 		dateFormat: 'D.M.Y'
  9. 	});
  10. });

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.

  1. $(function() {
  2. 	$('.jquery-note').jQueryNotes({
  3. 		allowAdd: false,
  4. 		allowEdit: false,
  5. 		allowDelete: false,
  6. 		allowHide: false
  7. 	});
  8. });

Image-size:

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

  1. $(function() {
  2. 	$('.jquery-note').jQueryNotes({
  3. 		allowAdd: false,
  4. 		allowEdit: false,
  5. 		allowDelete: false,
  6. 		allowHide: false,
  7. 		allowLinks: false
  8. 	});
  9. });

Loading:

Notes will not be loaded.

  1. $(function() {
  2. 	$('.jquery-note').jQueryNotes({
  3. 		loadNotes: false
  4. 	});
  5. });