Fancybox 3-混合图像和HTML

Question

在Fancybox 3中，是否可以在图像库中使用HTML？此HTML将具有指向外部站点的链接。无论我做什么，它都行不通。

<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