fancybox bug with trigger click

Question

I have to run fancybox with trigger click in my website, the problem that i discovered is that with this method if you click on elements inside the fancy box, the fancy box will close and appear again (blinks) .

i want fancybox to prevent blinking when i click on elements inside the box and when i click on those elements i don't want to see any changes, thats all :)

i created demo for this problem

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

any idea?

Answer 1

The problem with your code is that you are making the selector #a1 to act as both : the trigger and the target of fancybox therefore any click on itself will fire fancybox over and over again.

You would need to create another selector (the trigger) that targets the #a1 element like

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

if you don't want the element .fancybox be visible, just add a display:none property

Then your js

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

See JSFIDDLE

EDIT : looking at you sample JSFIDDLE, things could have been much simpler.

Having just this html

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

you could use this code

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

where no click is needed.

See you updated JSFIDDLE

Answer 2

I don't know it will be helpful or not just try this,

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

});

Answer 3

I had the same symptom of an unclickable Fancybox overlay. My client wanted to be able to link and automatically open up a certain Fancybox, like http://yoursite.com/#signup to open up an inline 'signup' Fancybox overlay. Thanks to JFK I realized I was triggering and targeting the element with the ID of 'signup' rather than the element with the href attribute of '#signup'. I got it to hook onto the last portion of the URL (i.e. #signup) and look up the matching 'a' href attribute, and to trigger a click on that element.

The demo below doesn't really help portray this, but you get to see the code.

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

The juicy bit:

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

Answer 4

Use this below html,add id to <div> and <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>

check here

----------------------Update----------------

add afterShow() to your jquery

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

        }).click();

Check again