<html>
<head>
<title></title>
<meta content="">
<link rel="stylesheet" type="text/css" href="icfbphototag.css"></link>
<link rel="stylesheet" type="text/css" href="selectionbox/icselectionbox.css"></link>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="icfbphototag.js"></script>
<script type="text/javascript" src="selectionbox/icselectionbox.js"></script>
<script type="text/javascript">
$(window).load(function(){
var obj = $('img#myimage');
var _boxes = [{id: 10, x1:10,x2:250,y1:140,y2:200,title:'Igor Crevar'},
{id: 20, x1:210,x2:130,y1:10,y2:100,title:'John John'}];
obj.icfbPhotoTag( {boxes: _boxes} );
for (i in _boxes){
addHoverLink(_boxes[i].id, _boxes[i].title);
}
$('#view').click(function(){
if ( $('#users').is(':visible') ){
obj.icfbPhotoTag.view();
$('#users').hide();
}
else{
obj.icfbPhotoTag.cancel();
$('#users').show();
}
return false;
});
$('#edit').click(function(){
$('#main_links').hide();
$('#edit_links').show();
$('#users').hide();
obj.icfbPhotoTag.edit();
return false;
});
$('#new').click(function(){
$('#main_links').hide();
$('#edit_links').show();
$('#users').hide();
obj.icfbPhotoTag.add();
return false;
});
$('#save').click(function(){
$('#main_links').show();
$('#edit_links').hide();
$('#users').show();
if ( obj.icfbPhotoTag.isNew() ){
$.icSelectionBox( { url:'getusers.php?friend=1',
onOkClick:function(users, el, sInput){
if ( !users.length ) return false;
var user = users[0];
//set new title/id,
obj.icfbPhotoTag.setTitleOfLast(user.title).setIdOfLast(user.id);
addHoverLink( user.id, user.title );
obj.icfbPhotoTag.save();
return true;
},
onCancelClick:function(el){
obj.icfbPhotoTag.cancel();
return true;
}
} );
}
else{
obj.icfbPhotoTag.save();
}
return false;
});
$('#cancel').click(function(){
$('#main_links').show();
$('#edit_links').hide();
$('#users').show();
obj.icfbPhotoTag.cancel();
return false;
});
$('#save_all').click(function(){
var boxes = obj.icfbPhotoTag.getBoxes();
var s = '';
for (i in boxes)
{
var k = 0;
for (j in boxes[i])
{
if ( k++ ) s += ', ';
s += j + ': '+boxes[i][j];
}
s += "\n";
}
alert(s);
return false;
});
function addHoverLink(_id,title){
var mainSpan = $('<span> </span>').appendTo($('#users'));
var a = $('<a></a>').attr('href','#').appendTo(mainSpan).html(title);
var d = $('<a></a>').attr('href','#').appendTo(mainSpan).html('(x)');
a.hover( function(e){
obj.icfbPhotoTag.displayBoxes(false); //hide all
obj.icfbPhotoTag.displayBox( _id, true ); //display one with id _id
},function(){
obj.icfbPhotoTag.displayBoxes(false); //hide all
});
d.click( function(e){
obj.icfbPhotoTag.removeBoxById(_id);
$(this).parent().remove();
return false;
});
$('#users').append(mainSpan);
}
});
</script>
</head>
<body>
<p style="margin:50px;">
<img id="myimage" src="b_1246622364p1.jpg" alt="" />
</p>
<div id="users"></div>
<p id="coords"></p>
<div id="main_links">
<a id="view" href="#">View</a>
<a id="new" href="#">New</a>
<a id="edit" href="#">Edit</a>
<a id="save_all" href="#">Save All</a>
</div>
<div id="edit_links" style="display:none">
<a id="save" href="#">Save</a>
<a id="cancel" href="#">Cancel</a>
</div>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
