how to add a "Tag photo" button to start tagging/ end tagging

Question

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.

Answer 1

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:

jsBin demo (with basic button functionality)

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)