Fancybox 3 - 混合图像和 HTML

Question

在 Fancybox 3 中，是否可以在图库中添加 HTML？此 HTML 将有一个指向外部站点的 link。我怎么弄都没用。

<div id="photo-gallery" style="display: none">

   <a data-fancybox="photo-gallery" href="photo-1.jpg"></a>
   <a data-fancybox="photo-gallery" href="photo-2.jpg"></a>
   <a data-fancybox="photo-gallery" href="photo-3.jpg"></a>

   The 4th item should be just a window with a link to another site, like:

   <a data-fancybox="photo-gallery" href="www.anothersite.com">Click here</a>

</div>

Answer 1

请检查示例文档 - http://fancyapps.com/fancybox/3/docs/

我猜你正在寻找这样的东西：

<a data-fancybox="photo-gallery" data-type="iframe" href="some-page.html">4</a>

演示 - https://codepen.io/anon/pen/vdxPJg?editors=1000

编辑 #1

如果你想在图库的末尾自动添加一些额外的内容，你可以使用这个片段：

$('[data-fancybox="photo-gallery"]').fancybox({
  onInit: function(instance) {
    instance.createGroup({
      type : 'html',
      content : '<div><h1>Hi</h1><a data-fancybox="photo-gallery" href="www.anothersite.com">Click here</a></div>'
    });
  }
})

演示 - https://codepen.io/anon/pen/KQmNGX?editors=1010

编辑 #2

这是混合图像和内嵌内容的方法：

<a data-fancybox="photo-gallery" href="#info">4</a>

<div id="info">
  <a href="www.anothersite.com">Click here</a>
</div>

演示 - https://codepen.io/anon/pen/KQmNrX?editors=1010

Fancybox 3 - 混合图像和 HTML

Fancybox 3 - Mix images and HTML

fancybox-3