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.