Use jQuery Fancybox(lightbox type dialog) with dynamically loaded links

Question

I'm trying to bind Fancy box links so that when the new links are created it will still work. I've seen a few other question on here but not really answered. This is what I'm trying to do.

jQuery("a#[id^='domore_']").fancybox({
'autoDimensions' : false,
'width'           : 'auto',
'height'          : 'auto'
});

This works fine but when the page or links are reloaded by ajax it doesn't work. I tried using live() but I couldn't get it to work. How do you rebind or implement live on fancybox? Any way to do this? Thanks

Answer 1

You will probably have to include the faceybox function call in your ajax success/callback method:

$.ajax({
  url: 'test.html',
  success: function(data) {
    $('.result')
     .html(data)
     .find("a#[id^='domore_']").fancybox({
       'autoDimensions' : false,
       'width'          : 'auto',
       'height'         : 'auto'
     });
  }
});

Answer 2

I personally use jQuery's live function.

jQuery("a#[id^='domore_']").live('click', function(){
    jQuery.fancybox({
        'autoDimensions'  : false,
        'width'           : 'auto',
        'height'          : 'auto',
        'href'            : $(this).attr('href')
    });
    return false;
});

Note: Not really related to your issue but be warned that jQuery 1.4.2 has a bit of an issue when using the change event on a select in IE but 1.4.1 seems to be fine for now. (search "live() method for 'change' event broken in Jquery 1.4.2 for IE (worked in 1.4.1)" on Google, I can't add the link as I'm new)

Hope it helps

Answer 3

You can use this. It worked for me

$('.address').live('click', function(){
$(this).fancybox({ 'width' : '40%', 'height' : '70%', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe', 'onClosed' : function() { $("#basket").load("/order/basket");
} }).trigger("click"); return false; });