【翻译】fancyBox 3中文文档

fancyBox3 中文文档

译文永久地址:https://kangkai124.github.io/fancybox/

说明:本文档仅供参考,更新不及时请查看官方文档

1. 介绍

fancyBox是一个JavaScript库,它以优雅的方式展示图片,视频和一些html内容。它包含你所期望的一切特性—支持手势,响应式和高度自定义。

1.1 依赖

推荐jQuery 3+,但是fancyBox仍支持jQery 1.9.1+和jQuery 2+。

注意

如果你在图片缩放时遇到了问题,请升级jQuery到最近版本(至少v3.2.1)。

1.2 兼容

fancyBox支持触摸操作,而且支持缩放等手势操作。对移动端和PC端都十分合适。

fancyBox已经在在下列浏览器测试:

  • Chrome
  • firefox
  • IE10/11
  • Edge
  • IOS Safari
  • Nexus 7 Chrome

2. 配置

可以通过引入.css.js到html文档中来使用fancyBox。确保在这之前引入了jQuery库。下面是使用fancyBox的一个基本的HTML模板:


<html>
<head>
    <meta charset="utf-8">
    <title>My pagetitle>

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

    

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

注意

  • 先引入jQuery
  • 如果页面中已经引入过jQuery,不能再次引入
  • 不要同时引入fancybox.jsfancybox.min.js
  • 一些方法(ajax,iframes,等)必须在一个web服务器上才可以正常运行,在浏览器打开一个本地文件是无法正常工作的

2.1 下载fancyBox

可以在GIthub下载最新的版本。

或者直接引用cdnjs—https://cdnjs.com/libraries/fancybox。

2.2 包管理工具

fancyBox还可以通多Bower和npm安装。

# NPM
npm install @fancyapps/fancybox --save

# Bower
bower install fancybox --save

3. 使用

3.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属性。

3.2 使用JavaScript初始化

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


                    
                    

你可能感兴趣的:(翻译)