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 ...
随机推荐
- VS2005自定义ActiveX控件在asp.net中应用方法
原文地址:http://www.cnblogs.com/zhf/archive/2009/03/02/1401299.html 开发环境为VS 2005, .NET framework 2.0 文件— ...
- RedisDesktopManager无法连接虚拟机中启动的redis服务问题解决
问题:开启虚拟机Redis,用RedisDesktopManager链接报超时. 问题排查: 1.检查redis是否正常启动 结果:正常启动 2.查看网络是否正常 结果:正常 3.检查redis bi ...
- 转:void *
void的含义 void即“无类型”,void *则为“无类型指针”,可以指向任何数据类型. void指针使用规范①void指针可以指向任意类型的数据,亦即可用任意数据类型的指针对void指针赋值.例 ...
- Python degrees() 函数
描述 degrees() 将弧度转换为角度. 语法 以下是 degrees() 方法的语法: import math math.degrees(x) 注意:degrees()是不能直接访问的,需要导入 ...
- JAVA-day08 下午-总结、測试
继承总结: class { public static void main(String[] args) { System.out.println("Hello World!"); ...
- 使用dockerfile 构建springboot 的docker镜像
1 新建一个 springboot 项目,并将其打包成 jar 文件.生成demo1.jar 文件 请参考 使用springBoot搭建REATFul风格的web demo 2 编写 dockerfi ...
- windows server 2012 r2 8080外网访问端口发布设置
windowser server 2012 r2 8080外网访问端口发布设置,在配置服务器时候,8080端口作为默认的web访问的端口,那么如何配置呢如下步骤: 工具/原料 windowser se ...
- mysql-5.7 扩展innodb系统表空间详解
一.innodb系统表空间的简介: innodb 系统表空间是由若干个文件组成的,表空间的大小就是对应文件的大小,表空间文件是由innodb_data_file_path 这人参数来定义的.下面我们来 ...
- python 例程的一个好例子
用例程来写一个求平均值的算法 #!/usr/local/python/bin/python3 def FunCore(): total=0 counter=0 average=None tmp=yie ...
- 自适应滤波:维纳滤波器——FIR及IIR设计
作者:桂. 时间:2017-03-23 06:28:45 链接:http://www.cnblogs.com/xingshansi/p/6603263.html [读书笔记02] 前言 仍然是西蒙. ...