javascriptjqueryfancyboxfancybox-2fancybox-3

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>

Solution

  • 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.