jquery - 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

根据 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”组的链接时，它将在那些没有“fb”类的链接上加载 fancybox 事件。如果是，则不会第二次触发，而是直接进入triggerHandler。

希望这对所有尝试使用 fancybox 处理图像库的人有所帮助。我还没有在单个图像 ajax 加载上测试过这个，但我认为它也能工作。