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选项会创建最后一张幻灯片，向用户说明他已到达幻灯片的末尾。参考：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>

但是，如果我单击图像3，当我前进时，它将不会显示其余图像。如果我单击图像4，我可以前一个（到图像3）和下一个（到图像5），但它不显示图像数。

有没有办法继续使用最新图像更新fancybox？提前谢谢。

Answer 1

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

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

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

1 个答案: