This is a highly configurable photo tagging plugin. It has been used in Ikluu (Social Network for travelers). It’s primely for tagging people on photos but it can also be used to create notes, but you will need to adapt the form part a little bit. The code is really clean and easy to understand, it follows the jquery plugin recommendations. Soon I will create a page with some more documentation, but for now if you take a look at the code you will definitely get it.
It has a bug on IE, the hover effect for the tags are not working well. I’m working on it….

Demo and unit testing
Update: The source code have been moved to GitHub, any help on the development would be highly appreciated.
GitHub Project Home Page
Download jquery.phototag.min.js v1.0
Download jquery.phototag.js v1.0

Example:

1. Reference css and javascript files:

<link media="screen" type="text/css" href="/static/photo-tag/libraries/jquery.autocomplete.css" rel="stylesheet">
<link media="screen" type="text/css" href="/static/photo-tag/tests/photo_tags/styles2.css" rel="stylesheet">
<script type="text/javascript" src="/static/photo-tag/libraries/jquery.dev.js"></script>
<script type="text/javascript" src="/static/photo-tag/libraries/jquery.ui.js"></script>
<script type="text/javascript" src="/static/photo-tag/libraries/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/static/photo-tag/js/jquery.phototag.js?ver=1"></script>

2. Call the photoTag plugin on load

$(document).ready(function(){
	$('.photoTag').photoTag({
		requesTagstUrl: '/static/photo-tag/tests/photo_tags/photo-tags.php',
		deleteTagsUrl: '/static/photo-tag/tests/photo_tags/delete.php',
		addTagUrl: '/static/photo-tag/tests/photo_tags/add-tag.php',
		parametersForNewTag: {
			name: {
				parameterKey: 'name',
				isAutocomplete: true,
				autocompleteUrl: '/static/photo-tag/tests/photo_tags/names.php',
				label: 'Name'
			}
		}
	});
});

3. Add the image

<img src="http://karlmendes.com/static/photo-tag/tests/photo_tags/monkeys2.jpg" class="photoTag userId_25 imageId_200 albumId_200">

Related posts:

1. Jquery Photo Tag Plugin source moved to GitHub
2. Easy way to use jQuery modal windows