jQuery Plugin: jQuery-Notes 1.0.8

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.

```
$(function() {
```
```
	$('.jquery-note').jQueryNotes({
```
```
		allowAdd: false,
```
```
		allowEdit: false,
```
```
		allowDelete: false,
```
```
		allowHide: false,
```
```
		allowLinks: false
```
```
	});
```
```
});
```

Loading:

Notes will not be loaded.

```
$(function() {
```
```
	$('.jquery-note').jQueryNotes({
```
```
		loadNotes: false
```
```
	});
```
```
});
```