Using afterClose event with Fancybox3

Question

How can I create an afterclose event with FancyBox3? I'm using afterClose event with the second version of fancybox but i'm trying to upgrade to fancybox3 and the instructions say to put the options in "data-options" attribute.

Here's what i tried:

  <a data-fancybox data-type="iframe" data-src="http://www.example.com" href="javascript:;"
     data-options='{
                   
                afterClose  : function() {
                    location.href = "http://www.google.com";
                }
                   }'>

and also:

<script>
        $("[data-fancybox]").fancybox({
    afterClose  : function() {
                    location.href = "http://www.google.com";
                }

        });
</script>

Answer 1

Your 2nd snippet should work, see this demo - https://codepen.io/anon/pen/OQmBZy?editors=1010

HTML

  <a data-fancybox="test" data-type="iframe" data-src="https://codepen.io/about/" href="javascript:;">
    External page
  </a>

JS

$('[data-fancybox="test"]').fancybox({
  afterClose  : function() {
    alert('Done!');
    location.href = "https://www.google.com";
  }
});

I have put alert('Done!') to see that callback executes. Google will prevent to load itself into an iframe, therefore you will see just blank page.

Answer 2

The code into the HTML attributes won't work as you expected, because it's just a simple text but not a real js function, so to make it work you shoul put the code into the js file, and you are missing something, so please try this

$.fancybox.open({
    src  : '#hidden-content',
    type : 'inline',
    opts : {
        afterShow : function( instance, current ) {
            console.info( 'done!' );
        }
    }
});

As the documentation says: https://fancyapps.com/fancybox/3/docs/#api