...

View Full Version : Facebook-like tagging script



olidenia
01-07-2011, 12:55 AM
Hello to all, I'm a php person and I'm having a hard time with this jquery script:

The function of the script is to tag persons on a photograph just like in facebook, the only thing is that I don't know how to save this data to my sql database and then retrieve it, edit, delete...

any help?

full script below.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Creating Tags Demo</title>

<style type="text/css">
html, body { margin: 0px; padding: 0px; }
body
{
color: #666;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding: 20px;
}

#tag-wrapper
{
border: 1px solid #ccc;
box-shadow: 0px 0px 10px #bbb;
-webkit-box-shadow: 0px 0px 10px #bbb;
-moz-box-shadow: 0px 0px 10px #bbb;
display: block;
padding: 10px;
position: relative;
}

#tag-target, #tag-wrapper img { cursor: crosshair; }

#tag-wrapper img { position: absolute; }

#tag-target
{
display: none;
border: 4px solid #fff;
box-shadow: 0px 0px 20px #000;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
height: 100px;
width: 100px;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}

#tag-input
{
background: #fff;
display: none;
padding: 5px;
position: absolute;
top: 0px;
left: 0px;
width: 137px;
z-index: 2;
}

#tag-input label
{
display: block;
font-weight: bold;
}

#tag-input input
{
border: 1px solid #ccc;
color: #888;
display: block;
margin: 5px 0px;
outline: 0px;
padding: 3px;
width: 124px;
}

.hotspot
{
border-width: 0px;
box-shadow: 0px 0px 0px #000;
-webkit-box-shadow: 0px 0px 0px #000;
-moz-box-shadow: 0px 0px 0px #000;
height: 100px;
width: 100px;
position: absolute;
}

.hotspot:hover, .hotspothover
{
border: 4px solid #fff;
box-shadow: 0px 0px 20px #000;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
z-index: 1;
}

.hotspot span { display: none; }
.hotspot:hover span, .hotspothover span
{
background: #fff;
display: block;
font-weight: bold;
padding: 3px 0px;
text-align: center;
}

.remove { color: #748950; cursor: pointer; text-decoration: underline; }
</style>

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

<script type="text/javascript">
//Placed outside .ready for scoping
var targetX, targetY;
var tagCounter = 0;

$(document).ready(function(){
//Dynamically wrap image
$("img").wrap('<div id="tag-wrapper"></div>');

//Dynamically size wrapper div based on image dimensions
$("#tag-wrapper").css({width: $("img").outerWidth(), height: $("img").outerHeight()});

//Append #tag-target content and #tag-input content
$("#tag-wrapper").append('<div id="tag-target"></div><div id="tag-input"><label for="tag-name">Person\'s Name:</label><input type="text" id="tag-name"><button type="submit">Submit</button><button type="reset">Cancel</button></div>');

//$("#tag-wrapper").click(function(e){
$("img").click(function(e){
//Determine area within element that mouse was clicked
mouseX = e.pageX - $("#tag-wrapper").offset().left;
mouseY = e.pageY - $("#tag-wrapper").offset().top;

//Get height and width of #tag-target
targetWidth = $("#tag-target").outerWidth();
targetHeight = $("#tag-target").outerHeight();

//Determine position for #tag-target
targetX = mouseX-targetWidth/2;
targetY = mouseY-targetHeight/2;

//Determine position for #tag-input
inputX = mouseX+targetWidth/2;
inputY = mouseY-targetHeight/2;

//Animate if second click, else position and fade in for first click
if($("#tag-target").css("display")=="block")
{
$("#tag-target").animate({left: targetX, top: targetY}, 500);
$("#tag-input").animate({left: inputX, top: inputY}, 500);
} else {
$("#tag-target").css({left: targetX, top: targetY}).fadeIn();
$("#tag-input").css({left: inputX, top: inputY}).fadeIn();
}

//Give input focus
$("#tag-name").focus();
});

//If cancel button is clicked
$('button[type="reset"]').click(function(){
closeTagInput();
});

//If enter button is clicked within #tag-input
$("#tag-name").keyup(function(e) {
if(e.keyCode == 13) submitTag();
});

//If submit button is clicked
$('button[type="submit"]').click(function(){
submitTag();
});

}); //$(document).ready

function submitTag()
{
tagValue = $("#tag-name").val();

//Adds a new list item below image. Also adds events inline since they are dynamically created after page load
$("#tag-wrapper").after('<p id="hotspot-item-' + tagCounter + '">' + tagValue + ' <span class="remove" onclick="removeTag(' + tagCounter + ')" onmouseover="showTag(' + tagCounter + ')" onmouseout="hideTag(' + tagCounter + ')">(Remove)</span></p>');

//Adds a new hotspot to image
$("#tag-wrapper").append('<div id="hotspot-' + tagCounter + '" class="hotspot" style="left:' + targetX + 'px; top:' + targetY + 'px;"><span>' + tagValue + '</span></div>');

tagCounter++;
closeTagInput();
}

function closeTagInput()
{
$("#tag-target").fadeOut();
$("#tag-input").fadeOut();
$("#tag-name").val("");
}

function removeTag(i)
{
$("#hotspot-item-"+i).fadeOut();
$("#hotspot-"+i).fadeOut();
}

function showTag(i)
{
$("#hotspot-"+i).addClass("hotspothover");
}

function hideTag(i)
{
$("#hotspot-"+i).removeClass("hotspothover");
}
</script>
</head>

<body>

<img src="example.jpg" style="width: 604px; height: 423px;">

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum