fancybox 使用方法
项目中需要做一个相册功能。选择的是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 使用方法的更多相关文章
- Uncaught TypeError: Object #<Object> has no method 'fancybox'
Uncaught TypeError: Object #<Object> has no method 'fancybox' 2011-10-24 16:51:19| 分类: html|举 ...
- jquery图片播放插件Fancybox(灯箱)
效果预览Demo源码下载 Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动 ...
- jQuery Fancybox插件介绍
下面介绍一款jquery图片播放插件叫Fancybox,项目主页地址:http://fancybox.net/ Fancybox的特点如下: 1.可以支持图片.html文本.flash动画.ifram ...
- ujquery.fancybox api开发文档中文翻译版
2016年11月17日11:57:14 基础使用 http://fancybox.net/howto 1. 首先,请确保您使用的是有效的DOCTYPE这是FancyBox看起来和功能正确需要. 2. ...
- 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件
今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...
- jQuery Fancybox插件使用参数详解
Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动插件(mouse whee ...
- jquery图片播放插件Fancybox使用详解
今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fa ...
- javaSE27天复习总结
JAVA学习总结 2 第一天 2 1:计算机概述(了解) 2 (1)计算机 2 (2)计算机硬件 2 (3)计算机软件 2 (4)软件开发(理解) 2 (5) ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(56)-插件---单文件上传与easyui使用fancybox
系列目录 https://yunpan.cn/cZVeSJ33XSHKZ 访问密码 0fc2 今天整合lightbox插件Fancybox1.3.4,发现1.3.4版本太老了.而目前easyui 1 ...
随机推荐
- JSP开发中对jstl的引用方式(标签库引用)
创建标签库引用文件taglibs.inc 一 采用本地标签库的taglibs.inc文件 <%--struts库标签 --%> <%@ taglib uri="/WEB-I ...
- Python 字典 popitem() 方法
描述 Python 字典 popitem() 方法随机返回并删除字典中的一个键/值对(一般删除末尾对). 如果字典已经为空,却调用了此方法,就报出KeyError异常. 语法 popitem() 方法 ...
- C#实现WinForm下DataGridView控件的拷贝和粘贴
DataGridView控件应该是数据库应用系统最常用的控件之一,其方便性不言而喻的.往往用户在使用过程中会提出"从DataGridView空间 中拷贝数据或是向某个DataGridView ...
- python标准库介绍——20 cStringIO 模块详解
==cStringIO 模块== ``cStringIO`` 是一个可选的模块, 是 ``StringIO`` 的更快速实现. 它的工作方式和 ``StringIO`` 基本相同, 但是它不可以被继承 ...
- unity, Find References In Scene
材质,脚本,shader等都可以通过Find References In Scene查看引用情况,如图. 当对一个文件点击Find References In Scene后,搜索命令会显示到Scene ...
- git使用(二)----创建版本库
创建版本库(操作都是在linux环境下) 什么是版本库呢?版本库又名仓库,英文名repository,其实就是一个目录,可以进行增删查改 创建一个目录,这里在根目录下创建一个git_home目录mkd ...
- 用 Angularjs 重构了整个 Raysnote 笔记本前端, v2.0 上线
Raysnote是一个简洁优雅的在线笔记工具,致力于提升笔记书写和阅读的体验. 简洁高效的笔记本管理后台(Angularjs重构) 支持HTML/Markdown两种格式,重点关注和支持Markdow ...
- INTEL
http://www.intel.com/content/www/us/en/processors/architectures-software-developer-manuals.html http ...
- ny655 光棍的yy 大数处理
光棍的yy 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 yy经常遇见一个奇怪的事情,每当他看时间的时候总会看见11:11,这个很纠结啊. 现在给你m个1,你可以把2个 ...
- MySQL通过视图(或临时表)实现动态SQL(游标)
>参考de优秀文章 写MySQL存储过程实现动态执行SQL Dynamic cursor in stored procedure MySQL通过视图(或临时表)实现动态SQL(游标). 因在实现 ...