Web前端

fancyBox 脚本的使用

介绍

fancyBox 用于呈现各种类型的媒体。以弹框的形式显示图像、视频和 HTML 内容，具有响应式、可触控和自定义的特点。
演示和帮助，请访问：https://fancyapps.com。

HTML 基本示例

通过链接 jquery-3.2.1.min.js、jquery.fancybox.min.css和jquery.fancybox.min.js 文件到 HTML 文件安装fancyBox。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My page</title>

	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

	<!-- Your HTML content goes here -->

	<!-- JS -->
	<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="jquery.fancybox.min.js"></script>
</body>
</html>

下载

在 GitHub 下载：https://github.com/fancyapps/fancybox。
或者直接链接 cdnjs 上的 fancyBox 文件：https://cdnjs.com/libraries/fancybox。

安装 fancyBox

  1. 添加 jQuery 和 fancyBox 文件
    1
    2
    3
    4
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

    <link  href="/path/to/jquery.fancybox.min.css" rel="stylesheet">
    <script src="/path/to/jquery.fancybox.min.js"></script>
  2. 创建链接
    1
    2
    3
    4
    5
    6
    7
    <a data-fancybox="gallery" href="big_1.jpg">
        <img src="small_1.jpg">
    </a>

    <a data-fancybox="gallery" href="big_2.jpg">
        <img src="small_2.jpg">
    </a>