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 (경우에 해당 될 수 있으나 리드하지 않음)

자, 이제 사용자 페이지 하단으로 스크롤 세 이상의 이미지 표시가 함께 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() { .. } 
});