项目实训-中医药知识图谱9

fancybox具体使用

1.1 使用 data 属性初始化

最基本的用法是通过添加 data-fancybox 属性到一个超链接标签。标题可以通过 data-capiton 添加。例如：

<a href="image.jpg" data-fancybox data-caption="My caption">
<img src="thumbnail.jpg" alt="" />
</a>
复制代码
在 CodePen 上查看例子

这种方式使用默认的配置，可以查看选项进行自定义配置，或者使用data-options属性。

1.2 使用 JavaScript 初始化

使用 jQuery 选择器选择一个元素，然后调用fancybox方法：

<script type="text/javascript">
$(“[data-fancybox]”).fancybox({
// Options will go here
});
</script>
复制代码
在 CodePen 上查看例子

使用这种方式，只有被选中的元素才可以触发点击事件。

为了可以现在或之后存在的元素都可以触发点击事件，使用selector选项。例如：

$().fancybox({
selector : ‘[data-fancybox=”images”]’,
loop : true
});
复制代码
在 CodePen 上