#Fancybox商品图片展示 Fancybox图片播放插件可以支持图片、html文本、flash动画、iframe以及ajax的支持，可以自定义播放器的CSS样式，可以以组的形式进行播放，如果将鼠标滚动插件（mouse wheel plugin）包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片，Fancybox播放器支持投影，更有立体的感觉。 ####官方地址：https://www.fancybox.net/
##兼容性
- ie6+
- Chrome 8+
##样例：
###1、使用步骤
- 引入样式文件（box.css，jquery.fancybox.css，jquery.fancybox-thumbs.css）
<link rel="stylesheet" type="text/css" href="style/box.css" />//商品图片样式文件
<link rel="stylesheet" type="text/css" href="style/jquery.fancybox.css?v=2.1.5" media="screen" />//fancybox样式文件
<link rel="stylesheet" type="text/css" href="style/jquery.fancybox-thumbs.css?v=1.0.7" />//fancybox相关操作样式文件- 在页面头部引用Jquery库：jquery-1.10.2.min.js；
- 以及Fancybox的实现代码：DD_belatedPNG.js，jquery.mousewheel.pack.js，jquery.fancybox.pack.js，jquery.fancybox-thumbs.js，goods.js。
//jQuery库
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
//png图片透明处理js文件
<!--[if IE 6]>
<script src="javascript/DD_belatedPNG.js" type="text/javascript"></script>
<![endif]-->
//鼠标操作js文件
<script type="text/javascript" src="js/jquery.mousewheel.pack.js?v=3.1.3"></script>
//fancybox主要js文件
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script>
//fancybox相关操作js文件
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=1.0.7"></script>
//商品图片操作js文件
<script type="text/javascript" src="js/goods.js"></script>- 在页面上添加代码
<div class="box">
<div class="tb-booth tb-pic tb-s310">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="gallayWrap">
<a href="images/1.jpg" class="fancybox-gallery" data-fancybox-group="gallery" title="第一张图"><img src="images/1.jpg" alt=""/></a>
<a href="images/2.jpg" class="fancybox-gallery hideGalleryBig" data-fancybox-group="gallery" title="第二张图"><img src="images/2.jpg" alt=""/></a>
</div>
</div>
<div class="thumb-wrap">
<ul class="tb-thumb" id="thumblist">
<li class="tb-selected"><div class="tb-pic tb-s40"><a href="javascript:void(0)"><img src="images/1.jpg" ></a></div></li>
<li><div class="tb-pic tb-s40"><a href="javascript:void(0)"><img src="images/2.jpg" ></a></div></li>
</ul>
</div>
</div>###2、demo
##配置和API ###1、配置
$(".fancybox-gallery").fancybox({
wrapCSS : 'fancybox-custom',//默认显示风格
openEffect : 'elastic',//展开动画
openSpeed : 150,//展开时间
closeEffect : 'elastic',//收起动画
closeSpeed : 150,//收起时间
helpers : {
thumbs : {//缩略图宽高
width : 50,
height : 50
}
}
});###2、API