Issue using livequery on fancybox with dynamically loaded content

Hi all,

I was hoping I might be able to get some help with an issue I am having.  I've 
been trying to figure out why this is happening for days.  It's pretty straight 
forward to explain.

I have a page that contains images, and those images are displayed in a 
fancybox window when they are clicked.  Some of these images are loaded 
dynamically after the page loads via AJAX.  

All of the images exist inside of link tags with 
class="challenge_image_gallery".  The code works the way it should on the 
images that are initially loaded on the page.  However, when the new images are 
loaded onto the page using AJAX, the fancybox window loads two instances of the 
image that was clicked on rather than one as it should.  Here's the code I'm 
using:

$(document).ready(function(){
      $("a.challenge_image_gallery").livequery(function(){
            $("a.challenge_image_gallery").fancybox({
                  'transitionIn'      : 'none',
                  'transitionOut'      : 'none',
                  'titlePosition'      : 'over',
                  'titleFormat'       : function(title, currentArray,currentIndex,currentOpts) {
return '<span id="fancybox-title-over">' + title + ' - Image '+  (currentIndex 
+ 1) + ' / ' + currentArray.length + ' ' + '</span>';
             }
            });
      });
});

Does anyone have any idea why this would be occurring?  I would really 
appreciate any insight because I am stumped.

Thank you so much!

Original issue reported on code.google.com by leff.mic...@gmail.com on 3 May 2011 at 2:31

yasinmhd / fancybox

Issue using livequery on fancybox with dynamically loaded content #104