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: 0 auto;}</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? （點擊這里演示）
歡迎轉載！ 原文地址:?http://www.phpddt.com/dhtml/jquery-fancybox.html?，轉載請注明地址，謝謝！ posted on 2013-06-29 21:50 mckee1990 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/phpddt/p/3162871.html
總結
以上是生活随笔為你收集整理的jquery Fancybox使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 十大网站压力测试软件-- WEB压力测试
- 下一篇： 基于Cairngorm的Silverli