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 ...
随机推荐
- ADF_ADF Framework基本概念(概念)
2014-01-01 Created By BaoXinjian
- [WARNING] mod_event_socket.c:2641 IP 172.18.1.112 Rejected by acl "loopback.auto"
一.目标修改event_socket配置,使之能够建立远端ESL链接. 二.步骤 . vim ../autoload_configs/event_socket.conf.xml . 默认的监听地址配置 ...
- C# 查看动态库的方法
使用Vs自带工具:开始菜单-->Microsoft Visual Studio 2010--> Visual Studio Tools-->Visual Studio 命令提示符 输 ...
- Comet入门及最简单的Java Demo
在浏览网页的时候,假设有新的消息,怎样接收到?HTTP协议不能由server主动给client发送消息. 1.刷微博.逛论坛贴吧,想看最新的信息怎么办?F5刷新一下就OK了! 2.上面一种方式是被动的 ...
- C语言:冒泡排序法:将若干字符串按字母顺序(由小到大)排序输出
#include<stdio.h> #include<string.h> void sort(char *a[]); void print(char *a[]); int ma ...
- 关于DDR3非常棒的文章
xilinx平台DDR3设计教程之仿真篇 http://wenku.baidu.com/view/c452d9a5524de518964b7dca.html?pn=50
- 每日英语:Genetic Manipulation Extends Life of Mice 20%
By reducing the activity of one type of gene, scientists said they increased the average life span o ...
- laravel 代码维护, 使用php artisan使用应用程序处于维护状态
当应用程序处于维护的时候,我们可以暂时关闭程序,具体的做使用是使用php artisan downartisan 是laravel根目录下的一个程序,当执行了这个命令时,会调用 app/start/g ...
- WPF学习之X名称空间详解
X名称空间里面的成员(如X:Name,X:Class)都是写给XAML编译器看的.用来引导XAML代码将XAML代码编译为CLR代码. 4.1X名称空间里面到底都有些什么? x名称空间映射的是:htt ...
- tortoisegit 7步 学会git分支
tortoisegit 7步 学会git分支 做自己的产品,分支还是很重要的.例如,我发布了一个app,但是有bug,又想做新功能,怎么办呢?如果只在一个git上开发的话,bug会越来越多,原来bug ...