Question

我想弄清楚如何在fancybox下面显示一些html内容并打开图片。我一直在搜索，但只能找到如何在打开的窗口中显示仅 html内容。我真的很感激任何帮助。谢谢。我做了一个小提琴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元素中。

＆＃13;

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

＆＃13;

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

＆＃13;

在fancybox中显示html内容？

1 个答案: