CODEWITHSUNDEEP
jqueryhtmlfancybox-3
roche
roche

Reputation: 155

Reload parent page on closing Iframe- Fancybox

I'm using FancyBox3 in a new project. Now I need to refresh the parent page when the iframe page is closed.

$('[data-fancybox]').fancybox({
  toolbar: false,
  smallBtn: true,
  iframe: {
    preload: false
  },
  fullScreen: {
    autoStart: true
  }
});
.fancybox-slide--iframe .fancybox-content {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-fancybox data-type="iframe" data-src="https://fancyapps.com/fancybox/3/docs/" href="javascript:;" type="button" class="btn btn-info" title="Show ">
  <i class="nav-icon  i-Home-Window fa-4x "></i>
</a>

Upvotes: 0

Views: 1589

Answers (3)

Nghokeng Daniel
Nghokeng Daniel

Reputation: 39

According to the documentation, you can add an event listener to your fancybox instance, and attach it to a callback that will reload the page for you:

$("[data-fancybox]").fancybox({
        afterClose: function( instance, slide ) {
       //To reload the page
        window.location.reload();

        }
    });

Upvotes: 0

Janis
Janis

Reputation: 8769

Simply use afterClose callback to execute your code after modal is closed

$('[data-fancybox]').fancybox({
  toolbar: false,
  smallBtn: true,
  iframe: {
    preload: false
  },
  fullScreen: {
    autoStart: true
  },
  afterClose : function() {
    alert(`Closing!`);
    window.location.reload();
  }
});

Demo - https://codepen.io/anon/pen/MMGejB (Node: Codepen disabled page reloading)

Upvotes: 1

plsankar
plsankar

Reputation: 492

Try this 

$('[data-fancybox]').fancybox({
toolbar: false,
smallBtn: true,
iframe: {
    preload: false
},
fullScreen: {
    autoStart: true
},
afterClose: function(instance, slide) {
    window.location.reload();
}
});

Upvotes: 0

Related Questions