ошибка fancybox с щелчком триггера

Я должен запустить fancybox с триггер нажмите кнопку на моем сайте, проблема, которую я обнаружил, заключается в том, что С помощью этого метода Если вы нажмете на элементы внутри коробки фантазии, окно фантазии закроется и появится снова (мигает) .

Я хочу, чтобы fancybox не мигал, когда я нажимаю на элементы внутри коробки, и когда я нажимаю на эти элементы, я не хочу видеть никаких изменений, вот и все:)

Я создал демо для эта проблема

http://jsfiddle.net/NhWLc/5/

<div id="a1">
  <p>Click on the box</p>
  <div class="r"></div>
</div>

$(document).ready(function() {
  $('#a1').fancybox({   
    afterClose: function() {
      console.log('closed :( ');
    }
  }).click();// or .trigger('click');
});

есть идеи?

9
fancybox javascript jquery

4 ответов

проблема с вашим кодом заключается в том, что вы делаете селектор #a1 действовать как : с триггер и цель fancybox поэтому любой щелчок по себе будет стрелять fancybox снова и снова.

вам нужно будет создать другой селектор (триггер), который нацелен на #a1 элемент, как

<a class="fancybox" href="#a1">triggers fancybox</a>
<div id="a1">
  <p>Click on the box</p>
  <div class="r"></div>
</div>

если вы не хотите, чтобы элемент .fancybox быть видимым, просто добавьте display:none свойства

затем ваш js

$(document).ready(function () {
    $('.fancybox').fancybox({
        afterClose: function () {
            console.log('closed :( ');
        }
    }).trigger('click');
});

посмотреть JSFIDDLE

редактировать : глядя на вас образец JSFIDDLE, все могло быть намного проще.

имея только этот html

<div id="a1">
  <p>Click on the box</p>
  <div class="r"></div>
</div>

вы можете использовать этот код

$(document).ready(function () {
    $.fancybox({
        href: "#a1"
    });
});

где нет это.

см. обновление JSFIDDLE

18

Я не знаю, будет ли это полезно или не просто попробовать это, 

$(document).ready(function(e)
{
e.preventDefault();   
            $('#a1').fancybox({ 
                afterClose: function()
                {
                    console.log('closed :( ');
                }
            }).click();// or .trigger('click');

});
0

используйте это ниже html, добавьте id to <div> и <a class="fancybox" rel="group" href="#r"><div id="r" class="r"></div></a>

<div id="a1">
    <p>Click on colors</p>
    <a class="fancybox" rel="group" href="#r"><div id="r" class="r"></div></a>
    <a class="fancybox" rel="group" href="#g"><div id="g" class="g"></div></a>
    <a class="fancybox" rel="group" href="#b"><div id="b" class="b"></div></a>
</div>

регистрация здесь

----------------------обновление----------------

добавить afterShow () в jquery

$('#a1').fancybox({ 
    afterClose: function()
            {
            console.log('closed :( ');
            },
            afterShow:function()
            {
                $('#a1').click(function(){return false;});
            }

        }).click();

проверьте еще раз

0

У меня был тот же симптом неубираемого наложения Fancybox. Мой клиент хотел иметь возможность связываться и автоматически открывать определенный Fancybox, например http://yoursite.com/#signup чтобы открыть встроенную "регистрацию" fancybox overlay. Благодаря JFK я понял, что запускаю и нацеливаю элемент с идентификатором "signup", а не элемент с атрибутом href "#signup". Я получил его, чтобы подключиться к последней части URL (т. е. #signup) и посмотреть соответствующий "a" атрибут href, и для запуска щелкните по этому элементу.

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

http://jsfiddle.net/ca7no4yp/2/

сочный бит:

$("a[href='#" + location.href.substr(location.href.indexOf('#')+1) + "']").fancybox().trigger('click');
0