jQuery Plugin To Tag Photos & DIVs - Image Tag

Image Tag is a jQuery plugin to display a form popup on top of the webpage that allow you to add custom comments/tags/notes to your images or even DIV elements.

See also:

• Flickr-Style Photo Tagging Plugin
• Lightweight Image Tagging Plugin For jQuery - Taggd
• Facebook-Like Photo Tagging Plugin
• Photo Tagging Plugin - jTag

How to use it:

1. Load the jQuery image tag plugin after jQuery library, before the closing body tag.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src='js/jquery-image-tag.js'></script>

2. Create the Html for a form box that will popup as you click on an image.

<div style="display:none">
  <form id="imageForm">
    <label>Title</label>
    <input type="text" name="title">
    </input>
    <label>Comment</label>
    <input type="textarea" name="comment">
    </input>
    <input type="submit" value="Tag">
    </input>
  </form>
</div>

3. Call the plugin on your image and specify the ID of the image tagging form.

$('img').imageTag({
tagForm: $("#imageForm")
);

4. Add custom CSS styles to the image tagging form.

.image-tag-wrapper {
  z-index: 5;
  position: relative;
}

.image-tag-wrapper .tagdiv {
  position: absolute;
  background-color: #E74C3C;
  color: white;
  z-index: 10;
  cursor: default;
  padding:0 10px;
}

.image-tag-wrapper .tagform-wrapper {
  position: absolute;
  background-color: #E74C3C;
  color: white;
  width: 200;
  z-index: 10;
  cursor: default;
  padding:10px;
}

.image-tag-wrapper .tagform-wrapper a {
  color: white;
}

.image-tag-wrapper.enabled {
  cursor: crosshair;
}

5. Full plugin options.

enableTag: true,
tagForm: "<form><input type='text' name='name'></input> <input type='hidden' name ='x'/><input type='hidden' name ='y'/></form>",
onTag: function(form) {},
labelProperty: 'name',
idProperty: 'id',
propertyX: 'x',
propertyY: 'y',
distanceUnity: 'pixels',
requiredFields: ['name'],
tags: [],
showTagsWhenDisabled: true

---

This awesome jQuery plugin is developed by idelahoz. For more Advanced Usages, please check the demo page or visit the official website.