How to determine when fancybox is open?_问答_开发者

I need to know that fancybox has been open up that to allow or deny another f开发者_运维技巧unction to start.

Build-in functions Fancybox like 'onStart' or 'onClosed' not work.

I'm talking about version 1.3.0 RC2

$.fancybox.isOpen (bool) indicates, whether fancybox is open.

The version your using apparently doesn't match the documentation; I looked at the source and saw the names of the options were different the the online docs. I just tested the following with 1.3RC2:

$(document).ready(function() {

    function myStartFunction() { alert('fancy box opened'); }

    $("a#inline").fancybox({
        'onStart': myStartFunction
    });  
});

The option you're looking for is 'onStart' - the alert in myStartFunction goes off every time I open a box. I'm not sure when they changed the option but you can look at the source of any version you use at the bottom, and see what the option should be called.

EDIT

I just double checked on v1.2.5 - the version I use - and the callbacks are indeed named different. callbackOnStart works with 1.25 but, as I said, not 1.3

Try to use methods

beforeLoad, // Before loading
afterLoad, // After loading
beforeShow, // Before changing in current item
afterShow, // After opening

This code work fine

$(".fancybox").fancybox({beforeShow:function(){alert('blah');}});

If you're looking for a way to determine whether fancybox is open or not (instead of an event that is fired upon opening fancybox) then as of fancybox v2 you can use the $.fancybox.isOpen property. It's not documented (at least I didn't find any reference) but it works.

Example:

if(!$.fancybox.isOpen) {
    $.fancybox.open({
        href: '#newsletter-campaign-popup',
        height: 385,
        width: 510,
        type: 'inline'
    });
}

The example above prevents opening a second fancybox if one is already open.

I'm not sure what you mean by built-in functions. Fancybox has callbacks which call user-defined functions (that you must make yourself). Like:

function myClose()
{
    alert('close');
}

function myStart()
{
    alert('start');
}

$("a#single_image").fancybox({
     'callbackOnClose': myClose,
     'callbackOnStart': myStart
// etc, etc..
});

Alternatively you could check the fancy_content div to see if it has anything inside. (if it has, then fancybox is open).

if ( $('#fancy_content:empty').length > 0 )
{
  // Is empty
}

this seems to work for me:

        isLoaded : function(){
            return $('#fancybox-content').html()!='';
        }

If you have multiple div's that you are using for fancybox, following code might be better and more universal solution:

if ($('.fancybox-opened').length == 0) {
  //there is no fancybox opened at all
}

Note also that fancybox content might not be always empty, even if fancybox is closed.

Answer for 2018 December.

if ($('.fancybox-content').length == 0) {
    //there is no fancybox opened at all
}

Details:

    function checkf()
    {
        if ($('.fancybox-content').length == 0) {
            alert('there is no fancybox opened at all.');
        }
        else
        {
            alert('there is a fancybox opened.');
        }
    }
    $("#ffbox").click(function()
    {
        setTimeout(checkf,1000);
    });
    checkf();

    <head>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.2/dist/jquery.fancybox.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.2/dist/jquery.fancybox.min.js"></script>
    </head>
    <body>
        <a data-fancybox data-options='{"iframe" : {"css" : {"width" : "80%", "height" : "80%"}}}' href="https://www.google.com/maps/search/?api=1&query=China" class="btn btn-primary" id="ffbox">Display Google Map</a>
    </body>