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代码,用.live替换.bind.但是,我不能让它为图像画廊工作.另一个建议(评论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.然后,您需要再次单击以实际启动您的图库 - "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
});

对于旧的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
    }
});