jquery Fancybox使用教程
Fancybox是一款基于jquery的对图片展示播放的插件,当然,它html文本、flash动画、iframe以及ajax也予以支持。还可以通过css自定义外观,阴影效果超级赞!
演示效果:http://www.phpddt.com/demo/fancyBox/demo/index.html
使用教程也是相当简单:
首先当然是要引入jquery核心库和Fancybox插件库:
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
如果你要实现图片滚轮效果,引入下面文件:
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
FancyBox核心js和css文件:
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
如果你需要按钮效果,引入按钮css文件:
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
如果你要实现缩略图效果,引入:
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
如果要动态加载媒体,引入:
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
下面是一个最简单的图片展示例子:
<!DOCTYPE html> <html> <head><title>fancyBox使用教程 - PHP点点通(www.phpddt.com)</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script> <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" /><script type="text/javascript">$(document).ready(function() {$('.fancybox').fancybox();$(".fancybox-effects-a").fancybox({helpers: {title : {type :'outside'},overlay : {speedOut :0}}});});</script><style type="text/css">.fancybox-custom .fancybox-skin {box-shadow: 0 0 50px #222;}body {max-width: 700px;margin:0auto;}</style> </head> <body><h3>对简单图片展示</h3><p><a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" /></a></p> </body> </html>
效果如如下:
更多FancyBox参数及选项配置如下:
下载:fancyBox-master.zip (点击这里演示)
转载于:https://www.cnblogs.com/phpddt/p/3162871.html
jquery Fancybox使用教程相关推荐
- jquery Fancybox插件的应用
Fancybox是一款基于jquery的对图片展示播放的插件,当然,它html文本.flash动画.iframe以及ajax也予以支持.还可以通过css自定义外观,阴影效果超级赞! 演示效果:http ...
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
中文版译者:Keel 此文以实例为基础一步步说明了jQuery的工作方式.现以中文翻译(添加我的补充说明)如下.如有相关意见或建议请 EMAIL 告知.或者在 BLOG中留言. 英文原版:http:/ ...
- jQuery EasyUI使用教程之使用标记创建树形菜单
2019独角兽企业重金招聘Python工程师标准>>> jQuery EasyUI最新试用版下载请猛戳>> 一个树形菜单可以使用标记创建.easyui树形菜单也可以定义在 ...
- 【转载】jQuery插件开发精品教程,让你的jQuery提升一个台阶
jQuery插件开发精品教程,让你的jQuery提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...
- jquery validate 中文教程【入门到精通】
jquery validate 中文教程[入门到精通] jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求 ...
- 30+ 新鲜惊奇的 jQuery 插件与教程
在网络发展领域,由于 jQuery 简单易学,易于使用和易于扩展的特点,因此正慢慢变得无处不在.以下是从一些 jQuery 相关文章中整理出来的 30+ 新鲜与惊奇的 jQuery 插件与教程.如果你 ...
- jQuery LigerUI 使用教程入门篇
jQuery LigerUI 使用教程入门篇 阅读目录 获取最新代码 ligerUI是什么 如何使用 如何扩展 获取最新代码 可以到http://ligerui.googlecode.com下载最新代 ...
- jQuery EasyUI使用教程之创建展开行详细编辑表单的CRUD应用
2019独角兽企业重金招聘Python工程师标准>>> 当切换datagrid视图到"detailview"时,用户可以展开一行来显示该行下面的任何详细信息.此功 ...
- 8个jQuery Mobile基础教程
来自phpchina:http://www.phpchina.com/archives/view-39863-1.html 1. jQuery Mobile入门介绍 2. jQuery Mobile基 ...
最新文章
- Intellij IDEA必备插件,提高效率的“七种武器”!
- 8GB变3GB Vista操作系统瘦身安装大法
- Caffe部署中的几个train-test-solver-prototxt-deploy等说明二
- 全球及中国卸妆条行业发展规模与营销前景分析报告2022版
- python子类初始化父类_Python实现子类调用父类的初始化实例
- eclipse 修改maven项目的jdk版本
- 4还是火箭弹好 rust_做人还是“软”一些好!身体这4个地方越硬越危险,看看你有没有...
- 群签名和环签名的区别_苹果企业签名和苹果超级签名的区别
- 揭秘 XR 开发难题,让虚拟现实不仅仅停留在好奇
- Hyper-V 2016 系列教程28 Hyper-v平台USB 外设解决方案介绍
- linux php yii安装教程,Linux 安装php 5.4 – yii2 环境
- 聊聊我是如何编程入门的
- Linux 下安装 yum
- 项目升级与环境变化架构侧重点
- itext转html为pdf 锚点,flying saucer html转pdf经验分享
- 基于FOC电路低次谐波抑制Simulink仿真
- JAVA面试算法小记
- Python脚本运行出现语法错误
- 水库调度C语言,山区小流域电站雨情遥测及水库防洪调度系统.docx
- 【微信开发】WeChat公众号开发接口及完整过程