photo

“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!

  1. Getting started
    1. Download
    2. Basic usage
    3. Customization
  2. Documentation
    1. Configuration
      1. Align Object
      2. Handler Object
      3. Offset Object
    2. Items
      1. Item Object
  3. Demo's
    1. Hover top popup
    2. Click bottom popup
    3. Click-mouseout left popup
    4. Click custom

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'
}
photo

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' }
]
photo

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' }
]
photo

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' }
]
photo

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'        }
]

适用浏览器:FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。

来源:站长素材