I am using the photo tagging script found here
http://www.bryantan.info/jquery/5 Very simple code.
It works great, but is always in tag enabled mode. How can I implement a button "Tag photo", which when clicked will enable tagging, and otherwise, the tagging is disabled. Also, When done tagging, this button can be clicked to turn off tagging.
Like facebook tagging.
You need a var that will toggle a Boolean value initially set to false.
Return your image clicks if that value is false :)
here is how to do it:
var tagEditing = false; // create this line
than add a button somewhere like:
<button id="startTag">Start tagging</button>
than add into this an if statement:
$('#tagit #btnsave').live('click',function(){
if( !tagEditing ){
return;
}
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.
// ............
});
Now you just need to toggle your tagEditing var, button text and image cursor style:
$('#startTag').click(function(){
tagEditing = !tagEditing;
$('#imgtag').css({cursor: tagEditing? 'crosshair' : 'default' });
$(this).text(tagEditing? 'End tagging':'Start tagging');
});
and also on upload :
$('#yourUploadButton').click(function(){
tagEditing = false;
});
Additionally if var tagEditing == false you'd like to change the image cursor style from crosshair to default (look in the demo to see how)
