How would you trigger an event when a ThickBox closes?

Question

This question is Semi-related to Wordpress, but has applications elsewhere. Basically, I'm trying to make it so when someone exits out of a Thickbox, it triggers an event elsewhere on the page. Editting the Thickbox file isn't an option.

Orsay

Answer 1

It's a bit complicated since Thickbox isn't written that way. But maybe you can use some tricks to do it.

It's not the recommended solution but you can "rewrite" the close function. Something like:

var old_tb_remove = window.tb_remove;

var tb_remove = function() {
    old_tb_remove(); // calls the tb_remove() of the Thickbox plugin
    alert('ohai');
};

Works \o/ http://jsfiddle.net/8q2JK/1/

Tarlatan

Thanks for the code. Found an issue with it: the image upload thickbox seems to call tb_remove function multiple times, causing the code in my custom tb_remove function to be called multiple times. Any ideas on how to combat this? – Orsay

hmmm... I will try to find a way to fix it. Will comment if I find something... Btw can you use another library ? – Tarlatan

I have some code that reproduces the problem in WordPress here: link. I'm trying to use WordPress's inbuilt image uploader thickbox but I'm running into this issue. – Orsay

Figured out a solution. By using a counter that is increased each time the function is called and putting my code in an if clause that is only executed if the counter is less than or equal to 1, I was able to reduce the execution of my code to only one time. Phew – Orsay

Answer 2

You can try something like this...

var tb_unload_count = 1;
$(window).bind('tb_unload', function () {
    if (tb_unload_count > 1) {
        tb_unload_count = 1;
    } else {
        // do something here
        tb_unload_count = tb_unload_count + 1;
    }
});

tb_unload is triggered twice so this includes a bit of a hack to make sure your code doesn't run the second time.

Aweless

Answer 3

Not sure if this is a global solution, but for WordPress, at least for the latest version (4.9.5), you can use:

jQuery( 'body' ).on( 'thickbox:removed', function() {
    // Your code here.
});

In Thickbox v3.1, tb_remove() calls:

jQuery( 'body' ).trigger( 'thickbox:removed' );

See: https://github.com/WordPress/WordPress/blob/master/wp-includes/js/thickbox/thickbox.js#L290

Marinate

Worked perfectly! – Caird

Answer 4

I think you can hack that by binding a click handler to the close button:

$("#TB_closeWindowButton").click(function() {
    doSomething();
});

If you have a choice, get rid of thickbox (as it is no longer maintained) and use something with a more active community. The thickbox site, in fact, proposes some alternatives ^mirror.

Crenation

I thought about telling him that, but he would have to rebind all the elements used to close the thickbox (the close button, the click on the overlay and the espace keypress) – Tarlatan

but +1 on the alternatives :) – Tarlatan

Ah - I should have spotted that. In case it is of interest, I got the close button click handler idea from here: designerfoo.com/… – Crenation

yeah that's a good idea, that's how I would do it in the first place. But re-writting all the bindings would be a pain in the ass :D – Tarlatan

Not only that but there are other ways to close a thickbox. Can't you close it by clicking outside of it? – Orsay

Answer 5

You can bind a listener to the "tb_unload" which triggers on when the thickbox is closed. Example using jQuery:

<input id="tb_button" type="button" value="Click to open thickbox" />

jQuery('#tb_button').on('click', function(){
      tb_show('This is Google in a thickbox', 'http://www.google.com?TB_iframe=true');
      jQuery('#TB_window').on("tb_unload", function(){
        alert('Triggered!');
    });
}

Biebel

This is actually a great answer. But, tb_unload isn't a function in the source code pointed to thickbox's home page. But it is in WordPress's version. Pointing this out might help. Also, it's an a element to trigger thickbox, not an input element. Finally, the example doesn't work since Google prohibits being loaded this way.tb_unload event. Perhaps a jsfiddle or codepen example. – Candie

Answer 6

On Thickbox 3.1, I will go inside thickbox-fixed.js and will add a custom function for myself

just to add a callback function, not sure is a good way, but its work for my project.

function mycustom_tb_remove(callback) {
  $("#TB_imageOff").unbind("click");
  $("#TB_closeWindowButton").unbind("click");
  $("#TB_window").fadeOut("fast",function(){
    if(callback)callback();
    $('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();
  });
  $("#TB_load").remove();
  if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
    $("body","html").css({height: "auto", width: "auto"});
    $("html").css("overflow","");
  }
  document.onkeydown = "";
  document.onkeyup = "";
  return false;
}

So when I use my custom remove's function. I will use it this way.

self.parent.mycustom_tb_remove(function(){
    alert("Closed");
});

Smithy

Answer 7

I wanted to trigger an event when thick box is opened I was able to do it this way: ( hope it helps someone )

jQuery( 'body' ).on( 'thickbox:iframe:loaded', function ( event ) {
//Your trigger code here.

});

Complicated