Facebook-Like Photo Tagging Plugin

A Facebook-Like Photo Tagging Plugin using jQuery and PHP with Database Integration that will help you create a photo tagging program like facebook.

Usage:

1. Database Diagram

CREATE TABLE `picture` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
)  ;

CREATE TABLE `image_tag` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pic_id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `pic_x` int(11) NOT NULL,
  `pic_y` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ;

2. Javascripts

<script>
  $(document).ready(function(){
    var counter = 0;
    var mouseX = 0;
    var mouseY = 0;
    
    $("#imgtag img").click(function(e){ // make sure the image is click
      var imgtag = $(this).parent(); // get the div to append the tagging entry
      mouseX = e.pageX - $(imgtag).offset().left; // x and y axis
      mouseY = e.pageY - $(imgtag).offset().top;
      $('#tagit').remove(); // remove any tagit div first
      $(imgtag).append('<div id="tagit"><div class="box"></div><div class="name"><div class="text">Type any name or tag</div><input type="text" name="txtname" id="tagname" /><input type="button" name="btnsave" value="Save" id="btnsave" /><input type="button" name="btncancel" value="Cancel" id="btncancel" /></div></div>');
      $('#tagit').css({top:mouseY,left:mouseX});
      
      $('#tagname').focus();
    });
    
    $('#tagit #btnsave').live('click',function(){
      name = $('#tagname').val();
      counter++;
      $('#taglist ol').append('<li rel="'+counter+'"><a>'+name+'</a> (<a class="remove">Remove</a>)</li>');
      $('#imgtag').append('<div class="tagview" id="view_'+counter+'"></div>');
      $('#view_' + counter).css({top:mouseY,left:mouseX});
      $('#tagit').fadeOut();
      // add backend code here, use mouseX and mouseY for the axis and counter.
      // ............
    });
    
     $('#tagit #btncancel').live('click',function(){
      $('#tagit').fadeOut();
      
    });
    
    $('#taglist li').live('mouseover mouseout',function(event){
      id = $(this).attr("rel");
      if (event.type == "mouseover"){
        $('#view_' + id).show();
      }else{
        $('#view_' + id).hide();
      }
    });
    
    $('#taglist li a.remove').live('click',function(){
      id = $(this).parent().attr("rel");
      $(this).parent().fadeOut('slow');
      $('#view_' + id).remove();
    });
  });
</script>

3. CSS

#imgtag
{
  position:relative;
  min-width:300px;
  min-height:300px;
  float:left;
  border:solid 3px #fff;
  cursor: crosshair;
}
.tagview
{
  border:solid 3px #fff;
  width:100px;
  height:100px;
  position:absolute;
  display:none;
}
#tagit
{
  position:absolute;
  top:0;left:0;
  width:250px;
}
#tagit .box
{
  border:solid 3px #fff;
  width:100px;
  height:100px;
  float:left;
}

#tagit .name
{
  float:left;
  background-color:#fff;
  width:130px;
  height:80px;
  padding:5px;
}
#tagit div.text
{
  margin-bottom:5px;
}
#tagit input[type=text]
{
  margin-bottom:5px;
}
#tagit #tagname
{
  width:110px;
}
#taglist
{
  background-color:#012D4A;
  width:300px;
  min-height:200px;
  height:auto !important;
  height:200px;
  float:left;
  padding:10px;
  margin-left:20px;
  color:#BFC6D0;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;

}
#taglist ol { padding:0 20px;float:left;cursor:pointer}
#taglist ol a { color:#BFC6D0;font-size:11px;}
#taglist ol a:hover { text-decoration:underline }
.tagtitle
{
  font-size:14px;
  text-align:center;
  width:100%;
  float:left;
}

4. HTML

<div id="imgtag">
<img src="/uploads/jquerySamples/phototag.png" />
</div>
<div id="taglist">
  <span class="tagtitle">List of Tags</span>
  <ol>
  </ol>
</div>

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.