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>

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


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>fancyBox使用教程 -  PHP点点通(www.phpddt.com)</title>
  5. <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
  6. <scripttype="text/javascript"src="../lib/jquery-1.10.1.min.js"></script>
  7. <scripttype="text/javascript"src="../source/jquery.fancybox.js?v=2.1.5"></script>
  8. <linkrel="stylesheet"type="text/css"href="../source/jquery.fancybox.css?v=2.1.5"media="screen"/>
  9. <scripttype="text/javascript">
  10. $(document).ready(function(){
  11. $('.fancybox').fancybox();
  12. $(".fancybox-effects-a").fancybox({
  13. helpers:{
  14. title :{
  15. type :'outside'
  16. },
  17. overlay :{
  18. speedOut :0
  19. }
  20. }
  21. });
  22. });
  23. </script>
  24. <styletype="text/css">
  25. .fancybox-custom .fancybox-skin {
  26. box-shadow:0050px#222;
  27. }
  28. body {
  29. max-width:700px;
  30. margin:0auto;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <h3>对简单图片展示</h3>
  36. <p>
  37. <aclass="fancybox"href="1_b.jpg"data-fancybox-group="gallery"title="Lorem ipsum dolor sit amet"><imgsrc="1_s.jpg"/></a>
  38. </p>
  39. </body>
  40. </html>

效果如如下：

jquery Fancybox插件的应用_fancybox

更多FancyBox参数及选项配置如下：

jquery Fancybox插件的应用_fancybox_02

下载：fancyBox-master.zip  （点击这里演示）

欢迎转载！ 原文地址: http://www.phpddt.com/dhtml/jquery-fancybox.html ，转载请注明地址，谢谢！