在 fancybox 中显示 html 内容？

Question

我正在尝试弄清楚如何在下面显示一些 html 内容并在 fancybox 中打开图像。我四处搜索，但只能找到如何在打开的 window 中显示仅 html 内容。我真的很感激任何帮助。谢谢。我做了一个 fiddle here

 <a id="single_image" href="http://fancyapps.com/fancybox/demo/1_s.jpg" width="400"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" width="100"></a>

<p>
Place this html content below the open image
</p>

jquery

$("a#single_image").fancybox();

Answer 1

我已经从他们的 tips and tricks 部分页面修改了一个示例 JSFiddles 来完成我认为你想要的。

Fancybox 可以选择运行一些 JS 在图像加载到其布局后，我们可以使用它来将您选择的 html 添加到 fancybox 元素中。

$("a#single_image").fancybox({
  afterLoad: function() {
    this.outer.append("<div>" + document.getElementById("content").innerHTML + "</div>");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>

<a id="single_image" href="http://fancyapps.com/fancybox/demo/1_s.jpg" width="400"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" width="100"></a>
<p id="content">
  Place this html content below the open image
</p>

在 fancybox 中显示 html 内容？

Display html content inside fancybox?

jquery

fancybox-2