Facebook-Like Photo Tagging Plugin
File Size: | 260 KB |
---|---|
Views Total: | 6802 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.