Как определить, когда открыта fancybox? - PullRequest
Новая
       8

Как определить, когда открыта fancybox?

9 голосов
/ 24 января 2010

Мне нужно знать, что fancybox открыт, чтобы разрешить или запретить запуск другой функции.

Встроенные функции Fancybox, такие как 'onStart' или 'onClosed', не работают.

Я говорю о версии 1.3.0 RC2

Ответы [ 8 ]

12 голосов
/ 12 ноября 2014

$.fancybox.isOpen (bool) указывает, открыт ли fancybox.

10 голосов
/ 25 января 2010

Версия, которую вы используете, очевидно, не соответствует документации; Я посмотрел на источник и увидел, что названия вариантов отличаются от онлайн-документов. Я только что проверил следующее с 1.3RC2: 

$(document).ready(function() {

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

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

Опция, которую вы ищете, - «onStart» - предупреждение в myStartFunction отключается каждый раз, когда я открываю окно. Я не уверен, когда они изменили опцию, но вы можете посмотреть на источник любой версии, которую вы используете, внизу, и посмотреть, как должна называться эта опция.

EDIT

Я просто дважды проверил v1.2.5 - версию, которую я использую - и обратные вызовы действительно названы по-разному. callbackOnStart работает с 1.25, но, как я уже сказал, не 1.3

8 голосов
/ 12 августа 2012

Попробуйте использовать методы 

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

Этот код отлично работает 

$(".fancybox").fancybox({beforeShow:function(){alert('blah');}});
4 голосов
/ 06 июня 2013

Если вы ищете способ определить, открыт ли fancybox или нет (вместо события, которое запускается при открытии fancybox), то для fancybox v2 вы можете использовать свойство $.fancybox.isOpen. Это не задокументировано (по крайней мере, я не нашел никакой ссылки), но оно работает.

Пример: 

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

Приведенный выше пример запрещает открывать второй необычный ящик, если он уже открыт.

3 голосов
/ 25 января 2010

Я не уверен, что вы подразумеваете под встроенными функциями. 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
}
2 голосов
/ 31 мая 2012

мне кажется, это работает: 

        isLoaded : function(){
            return $('#fancybox-content').html()!='';
        }
1 голос
/ 27 мая 2014

Если у вас есть несколько div, которые вы используете для fancybox, следующий код может быть лучшим и более универсальным решением: 

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

Обратите также внимание, что содержимое fancybox может быть не всегда пустым, даже если fancybox закрыт.

0 голосов
/ 06 декабря 2018

Ответ за 2018 декабрь. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...