Howdy,

A little while ago I published an article on how to create a facebook like tagging system.
Even thought It worked fine it was a bit messy and kinda hard to impletement.

I then started to work on a jQuery plugin that make that feature a lot easier to integrate on your solutions.

What does it look like ?

Click on the picture to start tagging

I made more demos to explain all the options of the script.

Where do I get it ?

You can get the source code on github or git clone git://github.com/djpate/jTag.git

Does it work on all browsers ?

This plugin was tested on FF 3.5+, IE7+ & chrome 8+

I dont really know about the rest but let me know in your comments !

What are the requirements ?

Obviously since this is a jQuery plugin you need jQuery ( tested on 1.4 +)

For the resize, drag & autocomplete features you need jQuery ui (tested on 1.8.7)

Everything is included in the source code.

How do I install it ?

First make sure you have jQuery if not add this to your head section

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>

Then install jQuery ui
If you dont need anything else from jQuery ui you can create a stripped down version on there site(select only resize,drag & autocomplete).
add this to your head section

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js'></script>
<link media="screen" rel="stylesheet" href="css/jquery-ui.custom.css" type="text/css" />

then install the minified version of my script, add this to your head section

<script type='text/javascript' src='js/jquery.tag.min.js'></script>
<link media="screen" rel="stylesheet" href="css/jquery.tag.css" type="text/css" />

How do I use it ?

Right now you can only use it on one image at a time !

Basicly you use it like that

<img src="someimg" id="myimg" />
<script>
  $("#myimg").tag();
</script>

This will start the plugin with all the default options.

Options & callbacks

name default value possible values more info
minWidth 100 an integer in px The tag area minimum width
maxWidth null an integer in px The tag area maximum width
minHeight 100 an integer in px The tag area minimum height
maxHeight null an integer in px The tag area maximum height
defaultWidth 100 an integer in px The tag area default width
defaultHeight 100 an integer in px The tag area default height
canTag true true|false If the user can tag this picture (sometimes you are only showing tags)
canDelete true true|false If the user can delete tags on this picture
draggable true true|false If the user can drag the tag window
resizable true true|false If the user can resize the tag window
clickToTag true true|false If the user can click the picture to tag it
autoShowDrag false true|false If the tag window should be launch at initialization
showTag hover hover|always When tags should be viewed
showLabels true true|false Show labels of tags underneath the image
autoComplete null anything that jQuery ui accept ( for example [ 'chris','john' ] ) Autocomplete values
defaultTags null [{'id':1,'label':'Uncle jack','width':150,'height':190,'top':50,'left':160}] Check out demo 5 for more info
save null a callback function ( for example function(width,height,top_pos,left,label,the_tag){} ) This will help you for ajax call when your tags are stored on the db (check out demo 6)
remove null a callback function ( for example function(id){alert(‘id’)} ) This will help you for ajax call when your tags are stored on the db (check out demo 6)

Now if you want to apply an option just use

<img src="someimg" id="myimg" />
<script>
  $("#myimg").tag({optionName: value});
</script>

Additional methods

Method name info
hideDrag() Hide the tag window if visible
showDrag() show the tag window if not yet active
enableClickToTag() enable the click to tag feature
disableClickToTag() disable the click to tag feature
addTag(width,height,top_pos,left,label,id) Manually add a tag, id is optional
setId(id) should be called in your save callback on the tag object and “id” should be the id the created tag in your db

I you like it leave a comment :)

Have fun !

Share

Related Posts: