Fancybox 3 将生成的内容添加到数据组

Question

假设我有一个包含多张图片的页面。当用户第一次加载页面时，它会显示 3 张图片。如果用户滚动到页面底部，将通过 Ajax 显示另外 3 张图片。我有以下代码在 Fancybox v3 中打开图像：

HTML

<a href="image.jpg" data-fancybox="group"><img src="image.jpg"></a>
<a href="image2.jpg" data-fancybox="group"><img src="image2.jpg"></a>
<a href="image3.jpg" data-fancybox="group"><img src="image3.jpg"></a>

JS:

$('[data-fancybox]').fancybox({
    onInit: function(instance) {
        instance.createGroup({
            type : 'html',
            src  : '<div class="fancybox-last"><a href="javascript:;" class="fancybox-" onClick="javascript:$.fancybox.close();">You reached the end</a></div>',
            opts : {
                smallBtn : false
            }
        });
    }
});

此 instance.createGroup 选项创建最后一张幻灯片，告诉用户他已到达幻灯片的末尾。 Ref: https://github.com/fancyapps/fancybox/issues/1670（与案例无关，但可能是线索）

好吧，现在用户向下滚动到页面底部，又出现了三张图片，留下 HTML 如下：

<a href="image.jpg" data-fancybox="group"><img src="image.jpg"></a>
<a href="image2.jpg" data-fancybox="group"><img src="image2.jpg"></a>
<a href="image3.jpg" data-fancybox="group"><img src="image3.jpg"></a>
<a href="image4.jpg" data-fancybox="group"><img src="image4.jpg"></a>
<a href="image5.jpg" data-fancybox="group"><img src="image5.jpg"></a>
<a href="image6.jpg" data-fancybox="group"><img src="image6.jpg"></a>

但是，如果我单击 image3，当我继续前进时，它不会显示其余图像。如果我单击 image4，我可以转到上一个（到 image3）和下一个（到 image5），但它不显示图像数。

有什么方法可以不断更新fancybox 最新的图片到群里吗？提前谢谢你。

Answer 1

参见 - http://fancyapps.com/fancybox/3/docs/#usage - 您可以通过两种方式初始化 fancyBox。你只需要像这样使用它：

$().fancybox({
  selector : '[data-fancybox="group"]',
  onInit : function() { .. }
});

Fancybox 3 将生成的内容添加到数据组

Fancybox 3 adding generated content to data-group

image

dynamic

fancybox