Question

我需要知道fancybox已经打开，允许或拒绝其他功能启动。

内置函数像'onStart'或'onClosed'这样的Fancybox不起作用。

我说的是版本1.3.0 RC2

Answer 1

$.fancybox.isOpen（bool）表示fancybox是否已打开。

Answer 2

您使用的版本显然与文档不符;我查看了源代码，看到选项的名称与在线文档不同。我刚用1.3RC2测试了以下内容：

$(document).ready(function() {

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

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

您正在寻找的选项是“onStart” - 每次打开一个盒子时，myStartFunction中的警报都会消失。我不确定他们何时更改了选项，但您可以查看底部使用的任何版本的来源，并查看应该调用的选项。

修改

我只是仔细检查了v1.2.5 - 我使用的版本 - 并且回调确实命名为不同。 callbackOnStart适用于1.25，但正如我所说，不是1.3

Answer 3

尝试使用方法

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

此代码可以正常使用

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

Answer 4

如果您正在寻找一种方法来确定fancybox是否已打开（而不是在打开fancybox时触发的事件），那么从fancybox v2开始，您可以使用$.fancybox.isOpen属性。它没有记录（至少我没有找到任何参考），但它确实有效。

示例：

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

上面的例子可以防止打开第二个fancybox（如果已经打开了。）

Answer 5

我不确定内置函数的含义。 Fancybox具有调用用户定义函数的回调（您必须自己创建）。像：

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

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

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

或者，您可以检查fancy_content div以查看其中是否有任何内容。（如果有，则打开fancybox）。

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

Answer 6

这似乎对我有用：

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

Answer 7

如果您有多个div用于fancybox，则以下代码可能更好，更通用的解决方案：

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

另请注意，即使fancybox已关闭，fancybox内容也可能并非总是为空。

Answer 8

2018年12月的答案。

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

详细信息：

    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>

如何确定fancybox何时打开？

8 个答案: