fancybox bug with trigger click

Solution 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