项目中需要做一个相册功能。选择的是fancybox,大概记录一下使用方法:

1.引用fancybox所需要的文件,你可以下载至本地或者引用CDN。

fancybox最新版本下载地址:http://fancyapps.com/fancybox/3/

CDN引用地址:

<link href="https://cdn.bootcss.com/fancybox/3.3.5/jquery.fancybox.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/fancybox/3.3.5/jquery.fancybox.min.js"></script>

2.编写相册所需的HMTL代码:

我这里是需要创建相册,所以同一个相册的data-fancybox的名字需保持一致。

注意:老版本是用rel,现在已经不支持了。我开始用的是新版本的,看的是老版本的文档,用rel没效果。这种低级错误,大家就不要再犯了。 

官方文档截图:

更详细的参数可访问:http://fancyapps.com/fancybox/3/docs/#usage

3.通过JS引用fancybox:

$(".js_gallery_evaluate").fancybox();

切记,看文档一定要跟你使用的版本对上号!!!

fancybox 使用方法的更多相关文章

  1. Uncaught TypeError: Object #<Object> has no method 'fancybox'

    Uncaught TypeError: Object #<Object> has no method 'fancybox' 2011-10-24 16:51:19|  分类: html|举 ...

  2. jquery图片播放插件Fancybox(灯箱)

    效果预览Demo源码下载 Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动 ...

  3. jQuery Fancybox插件介绍

    下面介绍一款jquery图片播放插件叫Fancybox,项目主页地址:http://fancybox.net/ Fancybox的特点如下: 1.可以支持图片.html文本.flash动画.ifram ...

  4. ujquery.fancybox api开发文档中文翻译版

    2016年11月17日11:57:14 基础使用 http://fancybox.net/howto 1. 首先,请确保您使用的是有效的DOCTYPE这是FancyBox看起来和功能正确需要. 2. ...

  5. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  6. jQuery Fancybox插件使用参数详解

    Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动插件(mouse whee ...

  7. jquery图片播放插件Fancybox使用详解

    今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fa ...

  8. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统(56)-插件---单文件上传与easyui使用fancybox

    系列目录 https://yunpan.cn/cZVeSJ33XSHKZ  访问密码 0fc2 今天整合lightbox插件Fancybox1.3.4,发现1.3.4版本太老了.而目前easyui 1 ...

随机推荐

  1. mongodb 安装教学

    安装文件:mongodb-win32-x86_64-2008plus-ssl-3.2.6-signed.msi 电脑配置:win7 64位 MongoDB的安装很简单,设置好安装路径后,一直Next直 ...

  2. 解决idea中Activiti的bpmn编辑器的中文乱码问题

    我使用的是idea2017+activiti6.0版本. 该文章主要是为了解决安装activiti插件后创建的流程模板中文乱码的问题. 1.安装Activiti流程编辑器插件. 1.1网上资料很多,这 ...

  3. Ubuntu16.04 安装RabbitMQ

    转载https://www.cnblogs.com/hongdada/p/7203589.html 安装RabbitMQ 由于rabbitMq需要erlang语言的支持,在安装rabbitMq之前需要 ...

  4. 使用用户自定义类型作为map的key

    有时候我们想把用户自定义类型作为std::map的键值.方法一)最简单的方法就是实现该自定义类型的<操作符,代码如下:class Foo{public:    Foo(int num_)     ...

  5. window 环境 Composer 安装 thinkphp5

    参考链接:https://www.kancloud.cn/thinkphp/thinkphp5_quickstart/478269 在 Windows 中,你需要下载并运行 Composer-Setu ...

  6. 从一到面试题了解js异步机制:setTimeout 和 Pronmise

    1.毫无疑问setTimeout是最晚输出的 2.请无视undefined,这是浏览器的返回值. 3.new Promise中并不是异步,而.then()后才是异步.

  7. haproxy有关session的问题

    在实验的时候遇到一个问题就是当我登录网站的时候,然后我再刷新一下,用户的状态就退出了 我现在的框架是这样的,前面有一台haproxy作为反向代理,后面有两台服务器跑的是java应用.后面两台服务器做的 ...

  8. Linux内存管理机制中buffer和cache的区别

    Linux内存管理机制中buffer和cache的区别理解linux内存管理,需要深入了解linux内存的各个参数含义和规则,下面介绍一下Linux操作系统中内存buffer和cache的区别. Fr ...

  9. 使用C语言调用mysql数据库编程实战以及技巧

    今天编写使用C语言调用mysql数据库编程实战以及技巧.为其它IT同行作为參考,当然有错误能够留言,共同学习. 一.mysql数据库的C语言经常使用接口API 1.首先当然是链接数据库mysql_re ...

  10. jQuery 隐藏与显示 input 默认值

    分享下jQuery如何隐藏和显示 input 默认值的例子. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...