Question

I am using orangeBox lightbox and have a video that is loading automatically, on page load – that works fine.

What I would like to happen, is that when the video (in orangeBox) is closed – that something else will happen on the page, but I can’t get the on-close method to work.
For some reason the method fires on page load and when I try bind it to the ob window – nothing at all fires.

Could someone please take a look at what I have – maybe i have set it up wrong?

Here is my code:

$(function(){
    function autoOpen(){
        $('#autoOpen').orangeBox('create');
    }

    function checkOB(){
        if ($("#ob_window").length) {alert("OB closing");}
    }

    function checkOB2(){
        alert("OB closing");
    }

    function starting(){
        alert("OB starting");
    }

    $(document).bind('oB_closing', checkOB());
    $(document).bind('oB_closed', checkOB2());

    $(document).bind('oB_init', starting());
    setTimeout(autoOpen,500); 
});

jsFiddle live demo

Thanks!

Answer 1

You need to pass the function “pointer”, not its return value:

$(document).bind('oB_closing', checkOB);
$(document).bind('oB_closed', checkOB2);

Updated fiddle: http://jsfiddle.net/qPEPB/3/

By adding () to the function names, you caused them to just be executed, and their return value assigned as the event handler.

By removing the brackets, it works as expected as you pass the pointer to the functions, and that pointer is then used by the internal code of orangeBox.