jquery Fancybox使用教程
健康学习 2013-07-01
Fancybox是一款基于jquery的对图片展示播放的插件，当然，它html文本、flash动画、iframe以及ajax也予以支持。还可以通过css自定义外观，阴影效果超级赞！
演示效果：http://www.phpddt.com/demo/fancyBox/demo/index.html
使用教程也是相当简单：
首先当然是要引入jquery核心库和Fancybox插件库：
<scripttype="text/javascript"src="../lib/jquery-1.10.1.min.js"></script>
如果你要实现图片滚轮效果，引入下面文件：
<scripttype="text/javascript"src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
FancyBox核心js和css文件：
<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"/>
如果你需要按钮效果，引入按钮css文件：
<linkrel="stylesheet"type="text/css"href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5"/>
<scripttype="text/javascript"src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
如果你要实现缩略图效果，引入：
<linkrel="stylesheet"type="text/css"href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7"/>
<scripttype="text/javascript"src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
如果要动态加载媒体，引入：
<scripttype="text/javascript"src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
下面是一个最简单的图片展示例子：
<!DOCTYPEhtml>
<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>
<h3>对简单图片展示</h3>
<p>
<aclass="fancybox"href="1_b.jpg"data-fancybox-group="gallery"title="Loremipsumdolorsitamet"><imgsrc="1_s.jpg"/></a>
</p>
</body>
</html>
效果如如下：
更多FancyBox参数及选项配置如下：
下载：fancyBox-master.zip（点击这里演示）
