jquery Fancybox使用教程
Fancybox是一款基于jquery的對(duì)圖片展示播放的插件，當(dāng)然，它html文本、flash動(dòng)畫(huà)、iframe以及ajax也予以支持。還可以通過(guò)css自定義外觀，陰影效果超級(jí)贊！
演示效果：http://www.phpddt.com/demo/fancyBox/demo/index.html
使用教程也是相當(dāng)簡(jiǎn)單：
首先當(dāng)然是要引入jquery核心庫(kù)和Fancybox插件庫(kù)：
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
如果你要實(shí)現(xiàn)圖片滾輪效果，引入下面文件：
<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>
如果你要實(shí)現(xiàn)縮略圖效果，引入：
<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>
如果要?jiǎng)討B(tài)加載媒體，引入：
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
?下面是一個(gè)最簡(jiǎn)單的圖片展示例子：
<!DOCTYPE html> <html> <head><title>fancyBox使用教程 - PHP點(diǎn)點(diǎn)通(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>對(duì)簡(jiǎn)單圖片展示</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參數(shù)及選項(xiàng)配置如下：
下載：fancyBox-master.zip? （點(diǎn)擊這里演示）
歡迎轉(zhuǎn)載！ 原文地址:?http://www.phpddt.com/dhtml/jquery-fancybox.html?，轉(zhuǎn)載請(qǐng)注明地址，謝謝！ posted on 2013-06-29 21:50 mckee1990 閱讀(...) 評(píng)論(...) 編輯 收藏轉(zhuǎn)載于:https://www.cnblogs.com/phpddt/p/3162871.html
總結(jié)
以上是生活随笔為你收集整理的jquery Fancybox使用教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 十大网站压力测试软件-- WEB压力测试
- 下一篇： 用Log4Net来记录系统的日志信息