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?

Answer 1

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()" />

Answer 2

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