How to determine when fancybox is open?

问题

I need to know that fancybox has been open up that to allow or deny another function to start.

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

I'm talking about version 1.3.0 RC2

回答1:

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

回答2:

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

回答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');}});

回答4:

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.

回答5:

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
}

回答6:

this seems to work for me:

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

回答7:

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.

回答8:

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>

来源：https://stackoverflow.com/questions/2128652/how-to-determine-when-fancybox-is-open

标签

javascript

fancybox