Fancybox 3生成されたコンテンツをデータグループに追加する

Question

私はいくつかの写真があるページを持っているとしましょう。ユーザーが最初にページを読み込むと、3枚の画像が表示されます。ユーザーがページの一番下までスクロールすると、Ajax経由でさらに3枚の画像が表示されます。

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オプションは、ユーザーに言う最後のスライドを作成し、私はFancybox v3では画像を開くには、次のコードを持っています彼はスライドの終わりに達した。参考：https://github.com/fancyapps/fancybox/issues/1670（ケースに関連していないが、リードでもよい）

まあ、今のユーザーページの一番下までスクロールすると、さらに3つの画像は、以下に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へ）行くことができますが、イメージカウントは表示されません。

最新の画像でファンシーボックスをグループに更新し続ける方法はありますか？前もって感謝します。

Answer 1

参照 - http://fancyapps.com/fancybox/3/docs/#usage - fancyBoxを2通りの方法で初期化できます。

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