Lightweight Image Tagging Plugin For jQuery - Taggd

Taggd is an easy-to-use and lightweight jQuery plugin that creates configurable photo tags to your images with / without a popup.

See also:

• Flickr-Style Photo Tagging Plugin
• Facebook-Like Photo Tagging Plugin
• Photo Tagging Plugin - jTag

Basic Usage:

1. Load the latest version of jQuery library from google CDN

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Include jQuery Taggd plugin after jQuery

<link rel="stylesheet" type="text/css" href="css/taggd.css" />
<script type="text/javascript" src="js/jquery.taggd.js"></script>

3. Initialization

<script type="text/javascript">
var data = [];
var settings = [];

$(window).load(function() {
$('.taggd').each(function(i, e) {
var $e = $(e);

$e.taggd(settings[i]);
$e.taggd('items', data[i])
});
});
</script>

4. Insert an image on your web page

<img class="taggd" src="img/example.jpg" alt="photo" /> 

5. Add your image tags using javascript

<script type="text/javascript">
data.push([
{ x: 0.512, y: 0.33, text: 'Huey' },
{ x: 0.548, y: 0.33, text: 'Dewey' },
{ x: 0.567, y: 0.36, text: 'Louie' }
]);

settings.push({
align: { 'y': 'bottom' },
offset: { 'top': -15 },

'handlers': {
'mouseenter': 'show',
'mouseleave': 'hide'
}
});
</script>

Change logs:

2016-07-26

• update to v3.0.0

2015-02-01

• update to v2.0.3

2015-01-06

• update to v2.0.1

2014-11-01

• update to v2.0

---

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