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