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><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/><scripttype="text/javascript"src="../lib/jquery-1.10.1.min.js"></script><scripttype="text/javascript"src="../source/jquery.fancybox.js?v=2.1.5"></script><linkrel="stylesheet"type="text/css"href="../source/jquery.fancybox.css?v=2.1.5"media="screen"/><scripttype="text/javascript">$(document).ready(function(){$('.fancybox').fancybox();$(".fancybox-effects-a").fancybox({helpers:{title :{type :'outside'},overlay :{speedOut :0}}});});</script><styletype="text/css">.fancybox-custom .fancybox-skin {box-shadow:0050px#222;}body {max-width:700px;margin:0auto;}</style></head><body><h4>对简单图片展示</h4><p><aclass="fancybox"href="1_b.jpg"data-fancybox-group="gallery"title="Lorem ipsum dolor sit amet"><imgsrc="1_s.jpg"/></a></p></body></html>效果如如下：
更多FancyBox参数及选项配置如下：
下载：fancyBox-master.zip （点击这里演示）
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
