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

希望这有助于所有尝试使用图片库来使用 fancybox 的人。 我还没有在单个图像 ajax 负载上测试过这个，但我认为它也可以工作。

Answer 2

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

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

使用 ajax，第一个答案开始打开，然后转到了 url，所以我将 fancybox 调用更改为以下内容：

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

    `});`

第一个答案让我想到了 Fancybox 通话中发生的事情，event.preventDefault(); 在我的案例中，它是第一个答案的缺失部分。

希望这对某人有所帮助。 顺便说一句，感谢 Petyp 推动正确的方式。

Answer 3

由于您只是在第一次点击时绑定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）并且如果我们还没有运行 @ 987654328@（它没有fb类，通过.filter()和:not()检查）然后这样做并分配类（通过.addClass()），下次点击它不会运行这个，只会触发点击处理程序，它将打开花式框。

Answer 4

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

Answer 5

结合 Roy 和 Nick 的答案，我有完整的解决方案在 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');
  });
});