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.

score 6 · Accepted Answer · answered Oct 02 '14 at 03:22

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.

late comment; in 2016, on FF, the jsfiddle doesn't open the lightbox — Owen Beresford, Oct 13 '16 at 11:04
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: http://jsfiddle.net/bookchiq/LejLwnq9/4/ — Sarah Lewis, Jan 10 '17 at 21:13

score 0 · Answer 2 · answered Oct 01 '14 at 06:42

0

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.

answered Oct 01 '14 at 06:42

JanR

6,052
3
23
30

Hi. Can you please provide me with fiddle. Thanks. – Mr.Happy Oct 01 '14 at 06:46
1

From looking at the docs & the source code, I get a feeling it might not be working at all. – JanR Oct 01 '14 at 07:15
1

Yeah that seems to be the plugin, my code is per their documentation. I think that plugin might not yet be fully functional. – JanR Oct 01 '14 at 09:53

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

2 Answers2