fancybox Bug mit Auslöser klicken

Question

I fancybox mit Trigger Klick in meiner Website zu laufen haben, ist das Problem, dass ich entdeckt, dass mit dieser Methode, wenn Sie auf Elemente in der Phantasie-Box klicken, wird die Phantasie Feld wird geschlossen und erscheint wieder (blinkt).

i fancybox blinken verhindern wollen, wenn ich in der Box auf Elemente klicken und wenn ich auf die Elemente klicken Ich möchte keine Änderungen sehen, das ist alles :)

i für diese Demo erstellt 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'); 
}); 

irgendeine Idee?

Answer 1

Das Problem mit Ihrem Code ist, dass Sie den Wähler #a1 machen, da beide zu handeln: die trigger und die target von fancybox also jeder klick auf sich selbst wird fancybox immer und immer wieder feuern.

Sie müssten einen anderen Wähler (der Auslöser), die das #a1 Element wie

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

Ziele erstellen, wenn Sie das Element nicht wollen .fancybox sichtbar sein, fügen Sie einfach eine display:none Eigenschaft

Dann Ihre js

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

Siehe JSFIDDLE

EDIT: Blick auf Sie Probe JSFIDDLE, Dinge könnten viel einfacher gewesen sein.

Mit nur diesen HTML

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

Sie diesen Code verwenden könnte

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

wo kein click benötigt wird.

Sehen Sie aktualisiert JSFIDDLE

Answer 2

Verwendung unter html dies, fügen id-<div> und <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 ----------------

hinzufügen After-Show(), um Ihre jquery

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

     }).click(); 

Check again

Answer 3

Ich weiß nicht, es hilfreich sein wird oder nicht nur diese versuchen,

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

}); 

Answer 4

Ich hatte das gleiche Symptom einer unclickable Fancybox Overlay. Mein Kunde wollte in der Lage sein, eine bestimmte Fancybox zu verknüpfen und automatisch zu öffnen, wie zum Beispiel http://yoursite.com/#signup, um ein Inline-Fancybox-Overlay zu öffnen. Dank JFK wurde mir klar, dass ich das Element mit der ID 'signup' anstoßen und zielen wollte und nicht das Element mit dem href-Attribut '#signup'. Ich hole es auf den letzten Teil der URL (d. H. #signup) und suche das passende Attribut 'a' href und klicke auf dieses Element.

Die Demo unten hilft nicht wirklich dabei, dies darzustellen, aber Sie können den Code sehen.

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

Das saftige Bit:

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