Phototagging like in Facebook and Orkut album photos?

Question

Is there a jQuery library or any leads on implementing that photo tagging like in Facebook and Orkut Photo albums?

Thanks

Answer 1

I didn't find any suitable plugins for this purpose. So I ended up writing myself a small plug-in to mark areas over an image based on the coordinates loaded through an XML file.

The basic code is required is:

<div id="imageholder">

 <!-- The main image -->
 <img src="<link to image file>" alt="Image">

 <!-- The grid tags -->
 <div class="gridtag" style="bottom: 100px; left: 106px; height: 41px; width: 41px;"/>
 <div class="gridtag" style="bottom: 300px; left: 56px; height: 100px; width: 56px;"/>

 <div class="gridtag" ...

</div>

And the basic CSS styling required:

#imageholder{
 height:500px;
 width:497px;
 position:relative;
}
div.gridtag {
 border:1px solid #F0F0F0;
 display:block;
 position:absolute;
 z-index:3;
}

In the above the divs with class "gridtags" are added using jQuery through XML or JSON and by binding events on this divs, we can make phototagging similar in Orkut.

PS: This only one side of the phototagging, ie. if we already have the coordinates we can mark on an image and add click events, which is the part actually i wanted. :) You guys has to write code for doing the marking part of the phototagging.

Answer 2

Hmmm, I found that the new version of Img Notes seems to do exactly what you want.

Checkout the Demo. It allows you to easily add tag notes and show them using JQuery. He also depends on the imgAreaSelect jquery plugin for adding notes.

Answer 3

you could try Jcrop or imgAreaSelect. Not 100% the same behaviour as in Facebook, but with some tweaks, this should e possible.

Answer 4

A good and complex example of tag like functionality in facebook is Talking Pictures, Which is a facebook application.