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

Thanks.

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/g68bZ/29/

Thanks.

• javascript
• jquery
• lightbox
• featherlight.js

2 Answers 2

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.

From the documentation you can use the following:

$('.myElement').featherlight($content, configuration);

$content being a jQuery object, and configuration being an object:

In your example:

var configuration = ({
   afterOpen: function(event){
      //code here
   },
   beforeOpen: function(event){
     //code here
   }
});

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

I haven't tested it, but this should help you in the right direction.