在 FancyBox 画廊中显示图片和视频
本文档介绍了如何使用 Json 数据和现有的 HTML 标签作为数据，在同一个 Fancybox 画廊中显示图片和视频。
引言
本文解释了如何使用 Json 数据和现有的 html 标签作为数据，在同一个 Fancybox 画廊中显示图像和视频。最后，我将提出一种直接从 Json 数据生成 Fancybox 画廊的方法，而无需先在页面上布局链接元素。
背景
Fancybox 是一个 Jquery 库，可以帮助你以漂亮的方式显示图像、视频和其他 html 类型的内容。Fancybox Jquery 库将以弹出窗口或类似画廊的演示文稿的形式显示内容。它也可以用来呈现能够处理输入的对话框。你可以使用此链接下载最新的构建版本并查看其一些演示。
使用代码
在同一个 Fancybox 画廊中组合视频和图像的问题在互联网上引发了很多问题。这是一个示例，展示了如何使用链接标签作为数据源，在同一个画廊中显示 Youtube 剪辑和 JPG 图像。
将所有对 Jquery 和 Fancybox 的引用添加到页面上的 <head> 标签之后。我使用的是此处找到的 Jquery 2.0.3 版本，以及此处找到的 Fancybox 2.1.5 版本。请参阅 Fancybox 下载中的 Demo 文件夹中包含 Fancybox 引用的演示。我的看起来像这样
<script src="Scripts/jquery-2.0.3.min.js"></script>
<script src="Scripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="/js/fancybox/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript" src="/js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
如你所见，我还从此处下载了 JQuery 鼠标滚轮插件，并将其添加到页面。 此插件将使你能够使用鼠标滚轮在画廊中的图像和视频之间导航。
以下是一些你可以放在网页上的 <body></body> 标签之间的链接
<a class="fancybox" data-fancybox-type="image" data-fancybox-group="group1" title="qwerty" href="your image file">Some text</a>
<a class="fancybox" data-fancybox-type="iframe" data-fancybox-group="group1" title="the video" href="a youtube video embed link ">Some text her to</a>
然后你需要使用 JQuery 拦截 on DOM ready 事件。这只是为了简单起见，并且将在页面完全加载后立即在屏幕上显示画廊；就像他们说的：当 DOM 准备好时 (文档对象模型)。以下代码可以放在 HTML 页面的 <head></head> 标签之间。
<script>
$(document).ready(function () {
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none',
nextEffect: 'none',
prevEffect: 'none',
padding: 0,
margin: [20, 0, 20, 0]
});
});
</script>查看上面的 JavaScript 例程，你会看到该功能的这一部分
$(".fancybox")
这意味着：选择页面上所有具有类名 fancybox 的元素。 这是一个 Jquery 选择例程，与 Fancybox 无关。 接下来你会看到用粗体标记的
$(".fancybox").fancybox({
这意味着：在选定的元素上使用 Fancybox.. 或将 Fancybox 应用于选定的元素。 这将启动将你的 <a> 链接转换为画廊的例程。 但是，在此发生之前，Fancybox 例程需要读取一些选项设置，这些设置是该代码块的其余部分。 例程将检查链接并查找 data-fancybox-type 属性。 data-fancybox-type 属性指示该链接是图像还是视频 (iframe)。 这将使画廊在 <DIV> 标签中显示图像和在 <iframe> 标签中显示视频之间切换。
假设你已经插入了自己的一些链接，该页面现在应该在 Web 浏览器中打开。
对于不太胆小的人
看看本文顶部的提供的源代码。 它将向你展示如何将 Json 对象用作画廊的数据。 从代码中你可以看到，没有涉及任何 html 链接。 实际上，网页的 body 标签之间没有任何东西。 看，妈妈！没手！ 这引发了这样的想法：我可以从数据库或 Web 服务获取链接数据吗？ 是的，你可以，但那必须是我的下一篇文章。 附加的代码文件肯定会暗示如何使用 Fancybox 插件中的数据。 即将到来的下一篇文章应侧重于获取图像库数据的不同方式。
历史
2014 年 2 月 18 日：撰写了有关如何使用 Fancybox Jquery 插件的介绍性文本。