Fancybox 3 - 混合图像和 HTML答案

【问题标题】：Fancybox 3 - Mix images and HTMLFancybox 3 - 混合图像和 HTML
【发布时间】：2018-02-10 10:45:25
【问题描述】：

在 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>

【问题讨论】：

标签： fancybox-3

【解决方案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

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

$('[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

【讨论】：

谢谢，但 iframe 不是用于显示来自其他网站的内容吗？我想要（如果可能的话）是最后一项不是图片，而是一个窗口，上面写着“请单击此处（链接）转到另一个站点”。
当然，我不知道我的问题不够精确。但是你猜怎么着：你更新的演示就像一个魅力！非常感谢！