Back to index | Fork me on github

jquery-imagetags

A jQuery (> 1.7.0) plugin that provides image tagging.

© Copyright 2012 by Christophe Pollet

Licensed under the MIT License http://www.opensource.org/licenses/mit-license.php

Demo

See demo 1 or demo 2

Usage

$("#container").imageTags({
  option1: value1,
  ...
});

Example

HTML markup:

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

<div id="container">
  <img src="picture.jpg">
</div>

Javascript, somewhere in $(function() { ... }):

$("#container").imageTags();

You're all setup! For more customization, continue reading.

Options

options are:

Public methods

After the ImageTags ($.ImageTags) initialisation through $(selector).imageTags(options), it is possible to call several methods on it using the following syntax:

$(selector).imageTags('methodName' [ , param1, [ ... ] ] );

The available methods are:

Events

The following events are triggered at different stage of tags creation, removal or display. Their target and this is the container.

Structures

$.ImageTags.Tag

$.ImageTags.Area

An area stores the location where a tag is on an image. To allow for easy image resizing, two area modes are available:

  1. fixed area: the corners are defined as absolute pixel positions; when the image is resized, the tags "move" relative to the their picture objects.
  2. proportional area: the corners are defined as a percentage on image's height and width; when the image is resized, the tags don't move and keep their positions relative to their picure objects.

Available method are: