fancybox 介绍
fancybox 提供了一种简洁优雅的方式去为 图片 、网页和多媒体 添加 灯箱 功能 。?
特点
1、允许我们用鼠标和 键盘 上的四个方向键切换 图片 2、可以根据当前窗口大小 自动 调整弹出框的大小，当我们改变浏览器窗口大小时，将会看到弹出框 自动 缩放了3、 支持 缩略图 和按钮帮助导航4、弹出框 支持 显示 多种类型的 内容 （ 图片 ，html，视频……）如何使用
首先下载 插件 ，解压然后复制 文件 到你的网站/项目 文件 夹中。在 中加载 文件 。确保你已经加载了 jQuery：<head><script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><link rel="stylesheet" href="/ fancybox /jquery. fancybox .css" type="text/css" media="screen" /><script type="text/JavaScript" src="/ fancybox /jquery. fancybox .pack.js"></script></head>创建你自己的 链接 ， 加上 fancybox 样式名，如果你想 显示 一个 标题 ，那就给该 链接 加上 一个 title 属性 。<a href="large_image.jpg" title="Sample title"><img src="small_image.jpg" /></a>如果你有一组相关的 图片 ，你得额外 加上 一个 rel（或 data- fancybox -group） 属性 ，给其赋 一个 组名：<a href="large_1.jpg" rel=" gal lery" title="Sample title 1"><img src="small_1.jpg" /></a><a href="large_2.jpg" rel=" gal lery" title="Sample title 1"><img src="small_2.jpg" /></a>用如下脚本初始化：<script>$(document).ready(function() {$('. fancybox '). fancybox ();});</script>你也可以给初始化脚本 加上 一些可选项来扩展 默 认的配置，比如：<script>$(document).ready(function() {$('. fancybox '). fancybox ({padding : 0,openEffect : 'elastic'});});</script> 提示 : 自动 分组然后将 fancybox 应用到所有 图片 上：$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel',' gal lery'). fancybox ();脚本用到了匹配的元素的 href 属性 来取得 内容 的位置，以及找出你想要展示的 内容 类型。你可以通过 添加 样式名（ fancybox .image, fancybox .iframe,等等）或者 data- fancybox -type 属性 来直接指定类型：//Ajax:<a href="/example.html">Example</a>//or<a href="/example.html" data- fancybox -type="ajax">Example</a>//Iframe:<a href="example.html">Example</a>//Inline (will dis play an element with `id="example"`)<a href="#example">Example</a>//SWF:<a href="example.swf">Example</a>//Image:<a href="example.jpg">Example</a>注意，ajax 请求会受到 同源策略 的影响。如果 fancybox 不能获得 内容 类型，它将会根据 href 属性 值来猜测，如果不成功就会静 默 退出 （这和以前的版本是不一样的，如果猜测不成功就会展示 一个 错误 信息）。 链接 : http://www.fly63.com/nav/1328网站地址 : http://fancyapps.com/fancybox/3/
GitHub: https://github.com/fancyapps/fancybox
网站描述: 一款优秀的弹出框Jquery 插件
fancyBox官方网站
官方网站： http://fancyapps.com/fancybox/3/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did174614