fancybox seems to not working with ajax content

Question

Hi

I've got the following code:

$(document).ready(function(){ $("a#cakeImages").live("click",function() fancybox({
        'titleShow'     : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    })) 
});

and I've got the correct images :

<a id="cakeImages" href="cakes/2/1.jpg" > 
<img alt="cakeImages" class="align-left no-border" src="cakes/2/1.jpg"  /></a>

But it's not working at all. I use .live, because my actual images change due to the ajax script on the page.

But when I only change it to :

$(document).ready(function() {$("a#cakeImages").fancybox({
            'titleShow'     : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
     }) 
}); 

Works only the firs time. Has anyone has a clue, what's going on ? :D

Answer 1

Since you're only binding the fancybox on the first click, not opening it you'll need to actually trigger it's handler, via .triggerHandler() to get it to open after that binding, like this:

$(function(){ 
  $("a#cakeImages").live("click", function() {
     $(this).filter(':not(.fb)').fancybox({
       'titleShow'      : false,
       'transitionIn'   : 'elastic',
       'transitionOut'  : 'elastic'
     }).addClass('fb');
     $(this).triggerHandler('click');
  });
}); 

What this does is listen for clicks on <a id="cakeImages"> elements (there should only be one at a time, use a class instead of an ID if this isn't the case) and if we haven't already run the .fancybox() (it doesn't have the fb class, check via .filter() and :not()) then do so and assign the class (via .addClass()), the next click it won't run this, only trigger the click handler, which will open the fancybox.