jQuery lightbox(featherlight) how to run beforeOpen and afterOpen event

Question

I am working with this jQuery lightbox which is featherlight and don't understand how to fire bellow events as I am not good so I am hopping someones help:

Before Open:

beforeOpen: function(event){

}

After Open:

afterOpen: function(event){

}

My Code Work:

<button id="openbox" href="#fl1">Load Lightbox on click event</button>

<div class="lightbox" id="fl1">
    <h2>Delete Item</h2>
    <div class="row">
        <div class="twelve columns">
            <strong>Are you Sure?</strong>
            <br>blubblub?
        </div>
    </div>
    <div class="right"> <a href="#" class="btn btn_gray no text_none" id="close_button">Close</a>
    <a href="#" class="btn btn_red text_none">Yes</a>
    </div>
</div>


$('#openbox').click(function() {
    $.featherlight('#fl1');
});

My Fiddle: http://jsfiddle.net/g68bZ/29/

Thanks.

Solution

I have downloaded the source code and follows the documents and both event are working properly with your example.

HTML Part:

<button id="openbox" href="#fl1">Load Lightbox on click event</button>
<div class="lightbox" id="fl1">
    <h2>Delete Item</h2>
    <div class="row">
        <div class="twelve columns">
            <strong>Are you Sure?</strong>
            <br>blubblub?
        </div>
    </div>
    <div class="right"> <a href="#" class="btn btn_gray no text_none" id="close_button">Close</a>
    <a href="#" class="btn btn_red text_none">Yes</a>
    </div>
</div>

jQuery Part:

<script type='text/javascript'> 
    window.onload=function(){
        $('button.#openbox').featherlight({
            targetAttr: 'href',
            beforeOpen: function(event){
                alert('beforeOpen');
            },
            afterOpen: function(event){
                alert('afterOpen');
            }
        });
    }           
</script>

Check this running JSFiddle

Let me know If you need any other help.

Comments

[Mr.Happy]

Hi. Can you please provide me with fiddle. Thanks.

[JanR]

From looking at the docs & the source code, I get a feeling it might not be working at all.

[JanR]

Yeah that seems to be the plugin, my code is per their documentation. I think that plugin might not yet be fully functional.

[Owen Beresford]

late comment; in 2016, on FF, the jsfiddle doesn't open the lightbox

[Sarah Lewis]

As @OwenBeresford noted, the jsfiddle stopped working at some point. It was due to the links to the external files dying in the interim. I've put up a quick-and-dirty update here: jsfiddle.net/bookchiq/LejLwnq9/4