fancybox seems to not working with ajax content

I've got the following code:

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

an开发者_高级运维d 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

---

With tips from Saikat and Nick, I've managed to come up with code that works with a gallery of images. Instead of just the one.

$(document).ready(function() {
    $("a[rel=gallery]").live('click', function(){
        $("a[rel=gallery]").filter(':not(.fb)').fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'none',           
        'titlePosition' : 'over'
        }).addClass('fb');
        $(this).triggerHandler('click');
        return false;
    });
});

What it does. When ajax finish loading the images on the page. On first click on any link with the "rel=gallery" group, it will load the fancybox event on those that does not have a "fb" class. If it does, it won't trigger it the second time but goes straight to the triggerHandler.

Hope this helps all trying to get fancybox work with a gallery of images. I haven't tested this on single image ajax loads, but I assume it'll work as well.

---

I know this is a old thread but I found it when I was looking for the answer to it so here it goes: if you are using the default

<a href="somewere.com" class="something"><img src="myimage.jpg" /></a>

using ajax the first answer started to open then went to the url anyway so I changed the fancybox call to the following :

`$(".fancybox").live("click", function(event) {`
     `event.preventDefault();`
         `$(this).filter(':not(.fb)').fancybox()`
         `.addClass('fb');`
         `$(this).triggerHandler('click');`

    `});`

the first answer got me thinking about what was going on in the Fancybox call, the event.preventDefault(); it the missing part of the first answer in my case.

Hope this help someone. BTW thanks Petyp for pushing the right way.

---

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.

---

$(document).ready(function(){                      
    $("a.previewfancy").live("click", function(event) {
        event.preventDefault();
        $(this).filter(':not(.fb)').fancybox()
         .addClass('fb');
         $(this).triggerHandler('click');
    });
});

---

Combining the answers from Roy and Nick, I have the complete solution working wonderfully inside an Ajax function.

    $(document).ready(function() {
    $("a[rel=gallery]").live('click', function(){
        $("a[rel=gallery]").filter(':not(.fb)').fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'none',           
        'titlePosition' : 'over'
        }).addClass('fb');
        $(this).triggerHandler('click');
        return false;
    });
});
        $(function(){ 
  $("a.fancybox").live("click", function() {
     $(this).filter(':not(.fb)').fancybox({
       'titleShow'      : false,
       'transitionIn'   : 'elastic',
       'transitionOut'  : 'elastic'
     }).addClass('fb');
     $(this).triggerHandler('click');
  });
});