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

Fancybox 3 - 混合图像和HTML

1 个答案: