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

我有类似的问题。如果你感兴趣，我发现了一些看起来很有前途的东西over here。似乎最常用的解决方案是编辑fancybox代码，用.live替换.bind。但是，我不能让它为图像画廊工作。另一个建议（评论14）确实有效（并且不需要任何搞乱fanybox）。尝试，

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

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

如果您将"mouseover focus"替换为"click"，您会发现点击拇指只会触发fancybox插件。然后，您需要再次单击以实际启动您的图库 - 而不是"mouseover focus"事件。

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

for old 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
    }
});

Fancybox画廊与jQuery的.live（）

2 个答案: