Remove the colorbox function (jQuery plugin) from only one link, and then reapply it

Question

I have two images, each of which is wrapped in a link. I want to prevent a shot from the colorbox, if I have many years. I noticed that colorbox only works on mouseup.

I am trying to use the setTimeout function with a timer, and then delete the color images from this image and “re-connect” the color code to this image with the mouse so that it can be run again if setTimeout does not occur.

HTML:

<a class="colorbox" href="..."><img src="..." /></a> <a class="colorbox" href="..."><img src="..." /></a> 

JS:

 $('a.colorbox').colorbox(); var timer; $('a.colorbox').on('mousedown', function(e) { var this_colorbox = $(this); timer = setTimeout(function() { this_colorbox.colorbox.remove();//this doesn't work }, 1500); }).on('mouseup', function(e) { clearTimeout(timer); });​ //"Reattach colorbox"?? 

Here is the fiddle: http://jsfiddle.net/mydCn/

I have a problem: $ .colorbox.remove (); (or my attempt at this_colorbox.colorbox.remove ();) removes the colorbox from all elements. How can I “reconnect the colorbox” to this image instead of calling the function again for each element (if so, when the number of images will affect performance, no?)?

Answer 1

I understood! I could just add and remove classes. I will post the answer so that it is useful to someone.

http://jsfiddle.net/mydCn/1/

 $('a.colorbox').colorbox(); var timer; var time_completed = 0; $('a.colorbox').each(function() { $(this).on('click', function(e) { if (time_completed === 0) { e.preventDefault(); $(this).removeClass('colorbox cboxElement'); } else if (time_completed == 1) { $(this).addClass('colorbox cboxElement'); time_completed = 0; } }); $(this).on('mousedown', function(e) { timer = setTimeout(function() { time_completed = 1; }, 500); }).on('mouseup', function(e) { clearTimeout(timer); if (time_completed == 1) { $(this).click(); } }); });​