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.

Solution 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/

Solution 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.

Solution 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

Comments

[Thomas Menga]

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)

[Thomas Menga]

but +1 on the alternatives :)

[karim79]

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

[Thomas Menga]

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

[Manny Fleurmond]

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

[Manny Fleurmond]

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?

[Thomas Menga]

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

[Manny Fleurmond]

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.

[Manny Fleurmond]

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

[Greg Bell]

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.

[Matt Browne]

Worked perfectly!