的fancybox似乎不使用Ajax内容

Question

我有下面的代码工作：

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

，我已经得到了正确的图像：

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

但它不工作。我使用.live，因为我的实际图像由于页面上的ajax脚本而改变。

但是，当我只将其更改为：

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

仅工作了冷杉的时间。 有没有人有线索，发生了什么事？ ：d

Answer 1

既然你只结合第一个点击的fancybox，不打开它，你会需要真正触发它的处理程序，通过.triggerHandler()让它绑定，这样以后再打开：

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

这样做是侦听<a id="cakeImages">元素的点击次数（应该只有一次一个，使用一个类，而不是一个ID，如果不是这种情况），如果我们还没有运行.fancybox() （它没有fb班，请通过.filter()和:not()查看）然后这样做，然后分配班级（vi一个.addClass()），下一次点击它不会运行这个，只触发点击处理程序，这将打开fancybox。

Answer 2

我知道这是一个古老的线程，但我发现它时，我一直在寻找的答案，它所以这里有云： 如果你使用的是默认

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

使用AJAX的第一个答案开始打开，然后去了网址反正所以我改变了的fancybox调用以下：

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

    `});` 

第一个答案让我联想到在通话的fancybox发生了什么事情，在event.preventDefault();它牛逼他在我的情况下缺少第一个答案的一部分。

希望这可以帮助别人。 顺便说一句，感谢Petyp推动正确的方式。

Answer 3

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

Answer 4

从Saikat和Nick的提示中，我设法提出了一些与图像库一起工作的代码。而不只是一个。

$(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; 
    }); 
}); 

它做什么。当ajax完成加载页面上的图像。首先点击“rel = gallery”组的任何链接，它会将fancybox事件加载到那些没有“fb”类的链接上。如果是这样，它不会再次触发它，而是直接触发triggerHandler。

希望这有助于所有试图让fancybox与图片库一起工作。 我还没有测试过这个单个图像Ajax负载，但我认为它也可以。

Answer 5

结合罗伊和尼克的答案，我有完美的解决方案在Ajax函数内工作。

$(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'); 
    }); 
});