I'm having a problem using the fancybox API after Close.

I open the function when people click on this:

<a class="fancybox fancybox.iframe btn" href="myurl.php"></a>

The javascript behind this is:

$('.fancybox.iframe')
    .fancybox({
    arrows: false,
    padding: 0,
    overlay: {
        locked: false
    },
    beforeClose: function () {
        location.reload();
    }
});

And it never reload the page when I close it. Can somebody help me? Thank you !

I'm having a problem using the fancybox API after Close.

I open the function when people click on this:

<a class="fancybox fancybox.iframe btn" href="myurl.php"></a>

The javascript behind this is:

$('.fancybox.iframe')
    .fancybox({
    arrows: false,
    padding: 0,
    overlay: {
        locked: false
    },
    beforeClose: function () {
        location.reload();
    }
});

And it never reload the page when I close it. Can somebody help me? Thank you !

• javascript
• jquery
• fancybox
• fancybox-2

• There is an error in the HTML-class, the period (.) should be replaced with a space( ): <a class="fancybox fancybox iframe btn" href="myurl.php"></a> – Adrian Forsius Commented Sep 17, 2014 at 6:59
• @AdrianForsius : is not an error, fancybox.iframe is a valid special class for fancybox v2.x – JFK Commented Sep 17, 2014 at 7:05

3 Answers 3

Some clarification to avoid further confusion:

Based on your html

<a class="fancybox fancybox.iframe btn" href="myurl.php"></a>

1. Use the afterClose callback (not an event) instead of beforeClose. For further reference check Tips & Tricks => No.11

2. The class fancybox is used to bind the selector to fancybox so your initialization code should look like this

   jQuery(document).ready(function ($) {
       $('.fancybox').fancybox({
           arrows: false,
           padding: 0,
           helpers: {
               overlay: {
                   locked: false
               }
           },
           afterClose: function () {
               location.reload();
           }
       });
   }); // ready
   

3. The (valid) fancybox.iframe class tells fancybox the type of content it should handle, but you don't use it to bind the selector to fancybox.

See JSFIDDLE

NOTE : this is for fancybox v2.x

You should use

$('.fancybox.iframe').fancybox({
    arrows: false,
    padding: 0,
    helpers: { overlay : {closeClick: false} },
    beforeClose: function () {
        parent.location.reload(true);
    }
});

(Note that the syntax is different between version 1 and 2 of fancybox. The above is for fancybox2)

Try using onClose event:

$('.fancybox.iframe')
.fancybox({
    arrows : false,
    padding: 0,
    overlay: {
        locked: false
    },
    onClosed: function() {
        location.reload(); 
    }

});

According to the API there is no beforeClose event, but there is onClose

http://fancybox/api