Fancybox 画廊与 jQuery 的 .live()

Question

我正在尝试显示一个 Fancybox 画廊，其中包含通过 JSON 加载的数据。加载并附加新的 HTML 后，我能够正确加载 Fancybox。但是，当我附加 rel="somegroup" 时，图库功能不起作用，并且我无法迭代 Fancybox 中的图像组。

这是我的 fancybox 调用：

$('.fancyness').live('click', function(){
        $.fancybox(this, {
            'width'         : 'auto',
            'height'        : 'auto',
            'titleShow'     : true,
            'titlePosition' : 'over'
        });
        return false;
    });

这是图像的样子：

html += '<li><a class="fancyness" rel="group" href="' + full + '" title="'+ title +'">';
html += '<img title="' + item.title + '" src="' + thumbnail + '" alt="' + item.title + '" /></a></li>';

如果我不使用 .live，则 gallery (rel) 函数将正常工作，但不能在此数据上工作，因为这是使用 JSON 加载的。

有人有什么想法吗？我没有运气找到其他有类似问题的人。

谢谢。

Answer 1

我有类似的问题。如果您感兴趣的话，我在这里发现了一些看起来很有前途的东西。那里似乎对大多数人有效的解决方案是编辑 fancybox 代码，将 .bind 替换为 .live。不过，我无法让它适用于图片画廊。另一个建议（评论14）确实有效（并且不需要对 fanybox 进行任何混乱）。尝试一下，

$("a.fancyness").live("mouseover focus", function() {
    $("a.fancyness").fancybox( {
        'width'         : 'auto',
        'height'        : 'auto',
        'titleShow'     : true,
        'titlePosition' : 'over'
    });
});

如果您查看链接中的注释 14，您会注意到这里的第二个选择器只是该注释中的 $(this) 。这对于单个图像来说很好，但如果您使用图像库，您希望 fancybox 在所有图像上启动，而不仅仅是您将鼠标悬停然后单击的图像（仅供参考，我还包括了焦点事件，因此如果您在缩略图上按键盘选项卡并按 Enter 键，图像库仍然会打开）。

如果将 "mouseover focus" 替换为 "click"，您会发现单击拇指只会触发 fancybox 插件。然后，您需要再次单击才能实际启动图库 - 因此会出现“鼠标悬停焦点” 事件。

Answer 2

让我困扰的是，在上述解决方案中，每次将鼠标移到某个 fancybox 元素上时，fancybox 函数都会被触发，所以我写了这个，它可以工作，但不会触发任何内容，除非您单击它。

jQuery(document).on('click','.fancybox',function(e){
    e.preventDefault();//don't follow link
    jQuery('.fancybox').fancybox();//update fancybox image registry with ALL loaded images
    jQuery(this).trigger('click.fb');//trigger click and fancybox popup
});

对于旧的 jQuery

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is('.fancybox')){
        e.preventDefault();//don't follow link
        jQuery('.fancybox').fancybox();//update fancybox image registry with ALL loaded images
        self.trigger('click.fb');//trigger click and fancybox popup
    }
});