I am using the Jquery LightBox plugin. It works fine. I need an dialog box to be opened once i click the close button of the Jquery LightBox. But i couldn do so...Is that possible to track the close event of lightbox and trigger another event?

Please help

I am using the Jquery LightBox plugin. It works fine. I need an dialog box to be opened once i click the close button of the Jquery LightBox. But i couldn do so...Is that possible to track the close event of lightbox and trigger another event?

Please help

• javascript
• jquery
• jquery-plugins
• lightbox

• yes, find close botton code in js file – Tinku Rana Commented Dec 4, 2012 at 8:06
• no.. i couldn.. if its a normal dialog box i can do that.. but not with lightbox.. If u have done that.. can u share me the code snippet please.. – Xavier Commented Dec 4, 2012 at 8:09
• which lightbox plugin you are using? – Tinku Rana Commented Dec 4, 2012 at 8:10
• search _finish() in this file, this function is called on close – Tinku Rana Commented Dec 4, 2012 at 8:22

4 Answers 4

Replace _finish function in jquery-lightbox-0.5.js with below code:

function _finish() {
    $('#jquery-lightbox').remove();
    $('#jquery-overlay').fadeOut(function() { $('#jquery-overlay').remove(); });
    // Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
    $('embed, object, select').css({ 'visibility' : 'visible' });

    var callback = settings.onClose;
    if($.isFunction(callback)) {
         callback.call();
    }
}

Add onClose in settings at top in jquery-lightbox-0.5.js file after activeImage;

// Don´t alter these variables in any way
imageArray: [],
activeImage: 0,         
onClose: null

Usage :

$('#gallery a').lightBox({ onClose : function() { alert('Hi'); }  } );

From the source

$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
    _finish();
    return false;
});

So just add an event handler to #lightbox-secNav-btnClose and it should work

$("body").on("click", "#lightbox-secNav-btnClose", function() {
    console.log("lightbox closed");
});

From personal experience I can remend you to use Colorbox

There you have onClosed property on the init of the colorbox so it's easy as:

$("a.lightbox").colorbox({
    onClosed: function() {
        console.log('closed')
    }
});

This worked for me without modifying anything in lightbox.js:

<div onclick="close_lightbox()">Close Button</div>

function close_lightbox()
{
    lightbox.end();
}