jquery Fancybox使用教程_H5之家 - 中国HTML5教程资源分享第一站

Fancybox是一款基于jquery的对图片展示播放的插件，当然，它html文本、flash动画、iframe以及ajax也予以支持。还可以通过css自定义外观，阴影效果超级赞！

演示效果：
使用教程也是相当简单：

首先当然是要引入jquery核心库和Fancybox插件库：

如果你要实现图片滚轮效果，引入下面文件：

FancyBox核心js和css文件：

如果你需要按钮效果，引入按钮css文件：

如果你要实现缩略图效果，引入：

如果要动态加载媒体，引入：

下面是一个最简单的图片展示例子：

<!DOCTYPE html><html><head> <title>fancyBox使用教程 - PHP点点通()</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 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: 0 auto; } </style></head><body> <h3>对简单图片展示</h3> <p> <a href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" /></a> </p></body></html>

flash动画 iframe jquery 图片 ajax