0

fancyboxギャラリーとはあまり関係のない要素をクリックして、fancybox画像ギャラリー（サムネイル付き）を開こうとしているので、trigerメソッドを使用したいと思います。

問題は、スタックオーバーフローの原因となる場合、写真の量が多い場合（たとえば、10枚の写真を含む8つのギャラリー/各ギャル）です。ここでは、live（）、bind（）、stopPropagation（）、stopImmediatePropagation（）などを使用するなど、いくつかの回答が見つかりましたが、何も機能しないようです。

HTMLは次のようなものです。

<div id="thumb_1" class="fancy-thumb">
  <a class="fancybox-thumb" id="gal-1 rel="gal-1"><img src="./foo/bar.baz"/></a>
  <a class="fancybox-thumb" rel="gal-1"><img src="./foo/bar.baz"/></a>
  <a class="fancybox-thumb" rel="gal-1"><img src="./foo/bar.baz"/></a>
  .........
  <a class="fancybox-thumb" rel="gal-1"><img src="./foo/bar.baz"/></a>
  <a class="fancybox-thumb" rel="gal-1"><img src="./foo/bar.baz"/></a>
  <another html elements absolute positioned such as labels etc>
</div>
.........
<div id="thumb_10" class="fancy-thumb">
  <a class="fancybox-thumb" id="gal-10 rel="gal-10"><img src="./foo/bar.baz"/></a>
  <a class="fancybox-thumb" rel="gal-10"><img src="./foo/bar.baz"/></a>
  <a class="fancybox-thumb" rel="gal-10"><img src="./foo/bar.baz"/></a>
  .........
  <a class="fancybox-thumb" rel="gal-10"><img src="./foo/bar.baz"/></a>
  <a class="fancybox-thumb" rel="gal-10"><img src="./foo/bar.baz"/></a>
  <another html elements absolute positioned such as labels etc>
</div>

JSは次のようになります。

// fancybox is initialized in after document ready
$(".fancybox-thumb").fancybox();

// this function should trigger fancybox
this.openGal(e){
   var gal_id = $(e.currentTarget).attr("id");
   $("#" + gal_id).trigger("click");
   return false;
   // note that here I've tried almost everything found at stackoverflow
   // but nothing seems to work
}

// listeren looks like this
$(".fancy-thumb").click(function(e) {scope.openGal(e);});

標準的な方法で行う必要があり、trigger（）を使用することはお勧めできないような回答を投稿しないでください。trigger（）を使用する必要があります。

4

1 に答える 1

1 
function openGal(e){
   var gal_id = $(e.currentTarget).attr("id");
   $("#" + gal_id).trigger("click");  //this was causing the following function to be called, resulting in an infinite loop
   return false;
}

// by delegating down a level, we are at the elements we actually want to attack
// the '>' operator selects child elements
$(".fancy-thumb >").click(function(e) {
    openGal(e);
});​

http://jsfiddle.net/LsmVb/は、アラートが正しく呼び出される方法を示しています。に変更$(".fancy-thumb a")する$(".fancy-thumb")と、無限ループが発生した場所を確認できます。

また、ファンシーサムのコンテンツ内にdivタグをラップすることもできます。これにより、上記のオペレーターがそれを選択できるようになります。これを行わない場合、タグで囲まれていないすべてのテキストはクリックできません。

于 2012-09-12T09:25:17.970 に答える