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 ...
随机推荐
- Python学习笔记010——作用域
1 作用域的分类 全局变量:在文件中所有函数外部创建的变量,整个文件可见 局部变量:在函数.类等内部创建的变量且仅用在函数内部的变量: 函数的形参也是局部变量. 注:所有的变量必须是先创建,再使用. ...
- PLSQL_统计信息系列02_统计信息的对象
20150505 Created By BaoXinjian
- Linux内核(16) - 高效学习Linux内核
世界悲结束了,章鱼哥也退役了,连非诚勿扰中的拜金女也突然的少了很多.这本<Linux内核修炼之道>在卓越.当当.china-pub上也已经开卖了,虽然是严肃文学,但为了保证流畅性,大部分文 ...
- [转]Hspice和Spice Explorer许可文件设置时环境变量FLEXLM_BATCH = 1的一些现象
之前在T400上安装Spice Explorer时碰到运行Spice Explorer时只能看到Log界面,主程序界面自动消失的问题.后经论坛高手指点,在环境变量设置中去掉"FLEXLM_B ...
- ubuntu中将某一程序设置为开机启动项的方法
一.简要说明 Linux操作系统的引导加载程序(对个人电脑而言通常是LILO)开始,介绍Linux开机引导的步骤. 加载内核LILO启动之后,如果你选择了Linux作为准备引导的操作系统,第一个被加载 ...
- Bash Shell启动配置脚本的顺序
1.Bash检查环境变量文件的方式,取决于系统运行Shell的方式,通常系统运行Shell有3种方式: )通过系统用户登陆后默认运行的Shell )非登陆交互式运行Shell )执行脚本运行非交互式S ...
- node-inspector调试报错问题处理
使用node-inspector调试的时候,提示下面的异常,我的node版本是6.9.2出现下面的异常,我同事的版本4.2.1就没有这个问题. C:\Users\dzm>node-inspect ...
- 每日英语:China Overtakes U.S. in Number of Diabetes Cases
China is now home to the world's largest diabetes population. The number of people who have diabetes ...
- LeetCode: Valid Number 解题报告
Valid NumberValidate if a given string is numeric. Some examples:"0" => true" 0.1 ...
- CSS初始化设置
在网页开发时,由于浏览器默认加载的css样式使得页面显示的样式出现一些意想不到的意外样式,所以首先要进行css的初始化设置. 此外一些常用的样式,比如浮动等也可以放到初始化中备用.