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.
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.