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

问题描述：

我有一个图片库并使用fancybox v3。通过输入webseite，前20张图片被加载（使用PHP生成），fancybox被连接到这些图片。fancybox 3不适用于用JSON + DOM加载的新内容操作（用于无限滚动）

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, 

      });

..this工作正常。

现在，如果用户到达页面的结尾，则会使用DOM操作加载插入到网站中的JSON格式的新内容。为此，我使用一个占位符，它是一个空的HTML模板，隐藏在webseite中。我将该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-线
px.children('a').attr('data-fancybox', "group");到px.children('a').attr('data-fancybox', "group2");，一个新的fancybox实例已经被应用到新的（JSON数据）记录。

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

如果用户再次到达网页的末尾，则会重新载入一组新图片并插入到图库中，该图片会进行拼接以破坏整个fancybox功能。 Fancybox不再运行正常。即使现有的图片也无法正常打开。

那么我怎么能处理JSON数据，它被添加到我的画廊和注入新的数据到现有的fancybox集？

您是否尝试过使用'.data（'fancybox'，“group”）'而不是使用'attr'？ – Janis

@Janis是的，我试过了，但没有区别。问题依然存在。 –

答

为了回答我自己的问题，有人遇到同样的问题：我的问题是基于fancybox中的一个bug，在3.2.21及更高版本中修复了这个bug。

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

相关推荐