新しいコンテンツにfancybox 3を使用できませんJSON + DOM操作（無限スクロール用）

Question

私は画像ギャラリーを持っていて、fancybox v3を使用しています。 webseiteに入ると、最初の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, 

      }); 

正常に動作します..this。

ユーザーがページの最後に達すると、JSON形式の新しいコンテンツが読み込まれ、DOM操作を使用してWebサイトに挿入されます。 これは、プレースホルダを使用しています。これは空の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"); 

残念ながら、これは機能しません。新たに追加された画像をクリックすると、ファンシーボックスが開き、（いずれの場合も）元のセットの最初の画像が表示されます。 Insight the fancybox最初のセットからすべての画像を "歩く"ことができますが、新しい画像を表示することはできません。

私はpx.children('a').attr('data-fancybox', "group2");にJS-ライン
px.children('a').attr('data-fancybox', "group");を変更した場合は、新しいfancybox-インスタンスが新しい（JSONデータ）レコードに適用されています。

しかし、画像ビューアは最初のセットの最初の画像から2番目のセット（JSONがロードされたセット）の最後の画像にスライドすることはできません。

ユーザーが再度Webページの最後に到達すると、新しい一連の画像が再度読み込まれ、ギャラリーに挿入されます。この縫い目は、ファンシーボックス機能全体を破壊します。ファンシーボックスが正しく動作しなくなりました。既存の画像であっても、適切に開くことはできません。

私のギャラリーに追加されたJSONデータをどのように処理して、新しいデータを既存のfancyboxセットに注入できますか？

Answer 1

この場合、私自身の質問には同じ問題があります。 問題は、バージョン3.2.21以降で修正されたfancyboxのバグに基づいていました。