Using afterClose event with Fancybox3

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

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.