“A picture is worth a thousand words”, but sometimes
even a thousand words are just not enough.
Taggd is a jQuery plugin that help you create tags on images with, or without a
popup!
Getting started
But, without data, there are no tags! We have to write just one more line:
$( image ).taggd( 'items', data );
Read Items to learn how to set up the data.
Customization
Of course, sometimes you want to do more than just a popup. By discarding
the text property of the items, and using
a function as Handler, you can do whatever you want,
just like this demo. If you need item-specific data in
the Handler, you can just add more properties to the Item
Object.
CSS styles are easily customizable. Just edit or replace the CSS rules in
the file css/taggd.css.
Configuration
| Property | Value | Description |
| align | Align Object | Popup aligning settings |
| handlers | Handler Object | Event handlers |
| offset | Offset Object | Offset of the hover element in pixels |
Align Object
Aligning is two-dimensional; the X-axis and the Y-axis. When you align an object left, the left side is snapped against the button.
| Property | Value | Default |
| x | String left, right or center |
center |
| y | String top, bottom or center |
center |
Example
{
x: 13,
y: 37
}
Handler Object
Handlers are used to add actions to the buttons. These are JavaScript
events like click, mouseenter, etc.
The
handler can be a function, or a string for popup interaction.
| String | Description |
| show | Shows the popup |
| hide | Hides the popup |
| toggle | Toggles the popup visability |
Example
{
click: function() {
alert('You clicked the tag!');
},
mouseenter: 'show',
mouseleave: 'hide'
}
Offset Object
The offset is the offset of the popup in pixels.
| Property | Value | Default |
| left | Number |
0 |
| top | Number |
0 |
Example
{
left: 13,
top: 37
}
Items
Items are what drives taggd. Without items, there's no way it would know where to put the tags and popups. That's why, we need items.
Items can be set with the following line, where data is an
array of Item Objects.
$( image ).taggd( 'items', data );
Item Object
| Property | Description |
Float x |
X position of the tag (and popup) |
Float y |
Y position of the tag (and popup) |
String text |
Optional. Set's the text of the popup. If omitted, there will be no popup. |
The x and y property can be in a scale from 0
to 1, or a number in pixels based on the image's dimensions. Both are
scalable.
This object also accepts custom properties, that can be read using a Handler.
Example
{
x: 0.5,
y: 0.5,
text: 'Popup text'
}
Settings
{
align: {
y: 'bottom'
},
offset: {
top: -15
},
handlers: {
mouseenter: 'show',
mouseleave: 'hide'
}
}
Items
[
{ x: 1099, y: 220, text: 'Dave' }, // pixel-based
{ x: 0.431, y: 0.33, text: 'Phil' }, // scale (0 - 1)
{ x: 0.468, y: 0.28, text: 'Steven' }
]
Settings
{
align: {
y: 'top'
},
offset: {
top: 15
},
handlers: {
click: 'toggle'
}
}
Items
[
{ x: 0.62, y: 0.7, text: 'Rope' },
{ x: 0.51, y: 0.5, text: 'Bird' },
{ x: 0.40, y: 0.3, text: 'Water, obviously' }
]
Settings
{
align: {
x: 'right'
},
offset: {
left: -15
},
handlers: {
click: 'show',
mouseleave: 'hide'
}
}
Items
[
{ x: 0.415, y: 0.343, text: 'Leaf' },
{ x: 0.25, y: 0.33, text: 'More water' },
{ x: 0.8, y: 0.1, text: 'This used to be a tree' }
]
Settings
{
align: {
y: 'bottom'
},
offset: {
top: -12
},
handlers: {
click: function( e ) {
var wiki = 'http://en.wikipedia.org/wiki/' + e.data.uri;
window.open( wiki, '_blank' );
},
mouseenter: 'show',
mouseleave: 'hide'
}
}
Items
[
{ x: 0.1, y: 0.54, text: 'Auto Rickshaw', uri: 'Auto_rickshaw' },
{ x: 0.49, y: 0.57, text: 'Registration Plate', uri: 'Vehicle_registration_plate' },
{ x: 0.38, y: 0.9, text: 'Lighting', uri: 'Automotive_lighting' }
]