Search code examples
jquerytriggersfancyboxstack-overflow

jQuery with fancybox using trigger() cause stack overflow

I am trying to open fancybox image gallery (with thumbnails) by clicking on element which is not really related to the fancybox gallery, so I want to use triger method.

Problem is, that with the greater amount of photos (8 galleries with 10 pics/each gal for instance) if causes stack overflow. I found few answers here, such asi using live(), bind(), stopPropagation(), stopImmediatePropagation() etc, but nothing seems to work for me.

HTML is something like this:

<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>

and JS looks like this:

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

Please, do not post such answers that is should do it in standart way and that using trigger() is not an good idea. I need to use trigger().

Solution 
  • 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/ shows how the alerts will be called correctly, by changing $(".fancy-thumb a") to $(".fancy-thumb") you can see where the infinite loop arose.

    You will also want to wrap an enclosing div tag inside of the content of your fancy-thumbs, this will allow the above operator to select it. If you don't want to do this, all text not enclosed in a tag will not be clickable.