带有jQuery .live()的Fancybox画廊 [英] Fancybox gallery with jQuery's .live()

问题描述

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

I am trying to display a Fancybox gallery with data that gets loaded via JSON. I was able to get the Fancybox to load properly after I load in and append the new HTML. However, when I attached rel="somegroup" the gallery functionality doesn't work and I cannot iterate through the group of images from the Fancybox.

这是我的fancybox电话:

Here's my fancybox call:

$('.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加载的.

If I don't use .live the gallery (rel) function will work correctly but not on this data because this is being loaded in with JSON.

有人有什么想法吗?我没有太多运气找到其他遇到类似问题的人.

Does anyone have any ideas? I haven't had much luck finding anyone else with a similar issue.

谢谢.

推荐答案

我遇到了类似的问题.如果您有兴趣，在这里在这里，我发现了一些很有前途的东西.在那里看来最可行的解决方案是编辑fancybox代码，用.live替换.bind.不过，我无法将其用于图片库.另一个建议(注释14)确实有效(并且不需要与fanybox混为一谈).试试吧，

I had a similar problem. I found something which looked promising over here if you are interested. The solution over there that seemed to work for most was to edit the fancybox code, replacing .bind with .live. I couldn't get that to work for image galleries, though. Another suggestion (comment 14) did work (and doesn't require any messing with fanybox). Try,

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

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

If you look at comment 14 from the link you'll note that what is the second selector here is simply $(this) in that comment. That is fine for single images, but if you are using an image gallery you want fancybox to launch on all the images, not just the one you mouseover'd and then clicked (FYI I also included the focus event so the image gallery still opens if you keyboard-tab over a thumbnail and hit enter).

如果将"mouseover focus"替换为"click"，您会发现单击拇指只会触发fancybox插件.然后，您需要再次单击以实际启动您的画廊-因此，将改为"mouseover focus"事件.

If you replace "mouseover focus" with "click" you will find that clicking on a thumb only fires the fancybox plugin. You then need to click a second time to actually launch your gallery - hence the "mouseover focus" events, instead.

这篇关于带有jQuery .live()的Fancybox画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！