0

我有一个图片库并使用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 会打开，并且（在每种情况下）都会显示原始集合中的第一张图片。洞察我可以“走”穿过初始集合中的所有图片的fancybox，但我无法到达/看到新加载的图片。

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

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

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

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

4

1 回答 1

0

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

于 2017-09-01T11:56:27.907 回答