fancybox 3 不适用于使用 JSON+DOM 操作加载的新内容（用于无限滚动）

Question

我有一个图片库并使用 fancybox v3。通过进入网站，加载前 20 张图片（使用 PHP 生成）并且 fancybox 连接到这些图片。

HTML 部分如下所示：

##loop##
<div class="item">
  <a  data-fancybox="group" href="<?= $i?>">
        <img src="/thumbnail/<?= $i?>"  />
  </a>
</div>
##/loop##

Fancybox 是这样初始化的：

$().fancybox({
                selector: '[data-fancybox="group"]',
                loop: true,

            });

..这很好用。

现在，如果用户到达页面末尾，将使用 DOM 操作加载 JSON 格式的新内容并插入到网站中。为此，我使用了一个占位符，它是一个空的 HTML 模板，隐藏在网站中。我将该 DOM 元素克隆到图库中，并使用来自 JSON 请求的数据填充新元素。

var px = $('#picturePlaceholder').clone().appendTo('.mygallery');
            px.removeAttr('id');
            px.children('a').attr('href', jsonValues.pictureURL);
            px.children('a').children('img').attr('src', jsonValues.thumbnailURL);
            px.children('a').attr('data-fancybox', "group" );

不幸的是，这不起作用。如果我点击一张新添加的图片，花式框将打开，并且（在任何情况下）都会显示原始图片集中的第一张图片。洞察 fancybox 我可以 "walk" 浏览初始集中的所有图片，但我无法 reach/see 新加载的图片。

如果我改变 JS-Line
px.children('a').attr('data-fancybox', "group" ); 到 px.children('a').attr('data-fancybox', "group2" );，新的 fancybox-instance 已应用于新的（JSON 数据）记录。

但是，图片查看器无法从初始组的第一张图片滑动到第二组（JSON 已加载）的最后一张图片。

如果用户再次到达网页末尾，则会再次加载一组新图片并将其插入图库，这似乎会破坏整个 fancybox 功能。 Fancybox 不再正确运行。连已有的图片都无法正常打开

那么我如何处理添加到我的图库中的 JSON 数据并将新数据注入现有的 fancybox 集合？

Answer 1

回答我自己的问题，有人有同样的问题：我的问题是基于 fancybox 中的一个错误，该错误已在 3.2.21 及更高版本中修复。

fancybox 3 不适用于使用 JSON+DOM 操作加载的新内容（用于无限滚动）

fancybox 3 not available for new content loaded with JSON+DOM Manipulation (for endless scrolling)

javascript

jquery

json

fancybox

fancybox-3