Colorbox does not have a close box event. The colorbox library has five events and they all fire when loading the Web page. There is nothing that fires when the the box is closing and returning to a page.

I am using inline data. I tried all the colorbox library events and they fired during the page load. I tried focus because it is supposed to return focus but that did not work. I tried a bunch of other jQuery event handlers, some fire when the page is loaded but nothing happens when the light box is closed. For our requirements, this makes Colorbox almost useless.

Does colobox display the original HTML or make a copy? If it makes a copy and fires something on the copy, we could modify the original first, then modify the copy after the copy is made. when the box closes, we would be back at the original.

If colorbox displays the original, we need to modify it for the box display then revert it back for the regular display.

Comments

frjo’s picture

frjo commented

Looking at the documentation at http://jacklmoore.com/colorbox/:

cbox_open triggers when ColorBox is first opened, but after a few key variable assignments take place.
cbox_load triggers at the start of the phase where content type is determined and loaded.
cbox_complete triggers when the transition has completed and the newly loaded content has been revealed.
cbox_cleanup triggers as the close method begins.
cbox_closed triggers as the close method ends.

On of the last two triggers should work for you.

If you don't want different content in the Colorbox from what is displayed on the page I don't think the inline feature is what you want to use.

peterx’s picture

peterx commented

All five events fire when the colorbox division is created. None of them fire when a box is displayed or a box is closed. There are two tables on my test page with both boxed. Colorbox reaches the closed event during page load. When I select a table, nothing fires. nothing fires when I close a box.

I ended up writing code to monitor the content for change. There are other ways to fire up Javascript on an event but all the jQuery ones occur at the wrong time. The click event for the close button can be attached to a function but it occurs while the box is still open and is useless for working on the original page.

I created a delayed event to wait 100 milliseconds then make the required change. It is the best I could do in a few hours. What would be better is a hook to fire a function after the close button is selected and the window is closed.

peterx’s picture

peterx commented
Status: Active » Closed (works as designed)

cbox_closed eventually worked. Initially it fired on page load. I changed a few parameters and some other jQuery code then cbox_closed worked as documented. Some combination of settings and actions made the Colorbox code run once during page load. Everything now works.

I still have some clunky jQuery in the page load because some browsers disagree on when a page is loaded. For anyone who runs into weird problems, test both an image and a table. In all browsers a table is loaded before the page is ready. Images are the opposite. Some browsers report the page ready before all the images are loaded and some do not report the page load at all. My weird problem probably occurred in part because I developed using pages containing only tables then tested with pages containing images.

SunRhythms’s picture

SunRhythms commented

can you post the jQuery changes and how you implemented the close?

peterx’s picture

peterx commented

I put some documentation in http://petermoulding.com/colorbox and will add the close example when I get back to the office.