Running code when featherlight lightbox is open and when closed, like callback

Question

Is there a way to run code when featherlight lightbox is opened? And again when it is closed? Is there a hook or something so that I can run code after the lightbox is opened? I couldn't find examples on the github page (https://github.com/noelboss/featherlight)

Addendum after answer from HBlackorby:

My setup is like this: HTML:

<ul data-featherlight 
    data-featherlight-type="ajax" 
    data-featherlight-filter="a.box" 
    data-featherlight-before-open="MYFUNCTION">

    <li><a class="box" href="content1">Link</a></li>
    <li><a class="box" href="content2">Link2</a></li>
    <li><a class="box" href="content3">Link3</a></li>

</ul>

And in my seperate JavaScript-File I have the following lines of code:

MYFUNCTION = function(){
    console.log('Test')
}

Unfortunately this function is not called before opening. Also tried it with "after" instead of "before". I also don't get errors. Where do these lines of code have to be when I call featherlight in the HTML?

Are you using something like Open element in lightbox
This div will be opened in a lightbox — Mahendra Pratap, Aug 26 '19 at 17:43
I added the information to my question. I am calling the lightbox in the HTML. — iMax, Aug 27 '19 at 07:19

HBlackorby · Answer 1 · 2019-08-29T16:12:47.497

6

In your featherlight config, you can set beforeOpen, afterOpen, beforeClose, and afterClose event hooks that will call a function for you when these events happen:

https://github.com/noelboss/featherlight/#installation

If you are binding the box with JS, you can specify these in the config you pass to it:

let myConfig = { beforeOpen: yourFunctionName1, beforeContent: yourFunctionName2, beforeClose: yourFunctionName3, afterOpen: yourFunctionName4 } $('.myElement').featherlight($content, myConfig);

Alternatively, you can also specify these events using HTML data attributes of your tag. For example:

<img src="" id="" data-featherlight-before-open="yourFunction1()" />

edited Aug 29 '19 at 16:12

answered Aug 26 '19 at 18:44

HBlackorby

1,308
1
11
18

Thank you very much. This is exactly what I wanted to know. I tried now to do it like this but unfortunately my function doesn't get called. Please see my comment / addendum above. – iMax Aug 27 '19 at 07:16
Marc-Andre is correct, my code example is missing the () if you use the data attributes. – HBlackorby Aug 29 '19 at 16:13

score 3 · Answer 2 · answered Aug 28 '19 at 08:10

3

data-featherlight-before-open must contain executable code. Try "MYFUNCTION()" (with parenthesis) instead of just "MYFUNCTION"

answered Aug 28 '19 at 08:10

Marc-André Lafortune

78,216
16
166
166

Running code when featherlight lightbox is open and when closed, like callback

2 Answers2