jQuery图片弹出层插件fancyBox下载_fancyBox参数说明及使用方法

fancyBox是一个非常优秀的图片弹出层的jQuery插件、带有丰富的弹出层效果、相比LightBox来说、Fancybox相对庞大点、配置也更丰富一些、这个插件也是一开始我集成到我博客里面的、由于最近在优化博客、减肥是必须的、想到只有首页用到了这个插件、忍痛割爱的把这个插件从我的博客中删掉了、不过还是很值得为大家推荐一下、相信你会喜欢的

fancyBox具有以下特性

1、可以加载DIV、图片、图片集、html文本、flash动画、SWF影片、iframe以及ajax数据

2、支持键盘方向键和ESC键

3、可以自定义播放器的CSS样式

4、可以以组的形式进行播放

5、如果将鼠标滚动插件（mouse wheel plugin）包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片

6、fancyBox播放器支持投影、更有立体的感觉

7、丰富的参数设置和方法调用

8、可扩展性强

当然作为一款强大的插件、使用也是必须要简单

引入JS和CSS文件

<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js" />
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5" />
<link type="text/css" 
	href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link  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"/>

jQuery初始化代码

<script type="text/javascript">
$(document).ready(function() {
$(´.fancybox-buttons´).fancybox({
	openEffect  : ´none´,
	closeEffect : ´none´,

	prevEffect : ´none´,
	nextEffect : ´none´,

	closeBtn  : false,

	helpers : {
		title : {
			type : ´inside´
		},
		buttons	: {}
	},

	afterLoad : function() {
		this.title = ´Image ´   (this.index   1)   ´ of ´ 
		  this.group.length   (this.title ? ´ - ´ 
		  this.title : ´´);
	}
});
});
</script>

使用A标签的HTML代码

<h3>Button helper</h3>
<p>
	<a class="fancybox-buttons" data-fancybox-group="button" 
		href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
	<a class="fancybox-buttons" data-fancybox-group="button" 
		href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
	<a class="fancybox-buttons" data-fancybox-group="button" 
		href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
	<a class="fancybox-buttons" data-fancybox-group="button" 
		href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
</p>

使用起来是很简单的、下面贴上fancyBox的源代码Demo、这个Demo里面实现了所有fancyBox效果、大家可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1qW4Zegc 密码: l4zm

下面是fancyBox的API和配置选项说明

属性名	默认值	简要说明
padding	10	浏览框内边距，和css中的padding一个意思
margin	20	浏览框外边距，和css中的margin一个意思
opacity	false	如果为true，则fancybox在动画改变的时候透明度可以跟着改变
modal	false	如果为true，则´overlayShow´ 会被设成 ´true´ ， ´hideOnOverlayClick´, ´hideOnContentClick´, ´enableEscapeButton´, ´showCloseButton´ 会被设成 ´false´
cyclic	false	如果为true，相册会循环播放
scrolling	´auto´	设置overflow的值来创建或隐藏滚动条，可以设置成 ´auto´, ´yes´, or ´no´
width	560	设置iframe和swf的宽度，如果 ´autoDimensions´为 ´false´，这也可以设置普通文本的宽度
height	340	设置iframe和swf的高度，如果 ´autoDimensions´为 ´false´，这也可以设置普通文本的高度
autoScale	true	如果为true，fancybox可以自适应浏览器窗口大小
autoDimensions	true	在内联文本和ajax中，设置是否动态调整元素的尺寸，如果为true，请确保你已经为元素设置了尺寸大小
centerOnScroll	false	如果为true，当你滚动滚动条时，fancybox将会一直停留在浏览器中心
ajax	{ }	和jquery的ajax调用选项一样 注意: ´error´ and ´success´ 这两个回调事件会被fancybox重写
swf	{wmode: ´transparent´}	swf的设置选项
hideOnOverlayClick	true	如果为true则点击遮罩层关闭fancybox
hideOnContentClick	false	如果为true则点击播放内容关闭fancybox
overlayShow	true	如果为true，则显示遮罩层
overlayOpacity	0.3	遮罩层的透明度（范围0-1）
overlayColor	´#666´	遮罩层的背景颜色
titleShow	true	如果为true，则显示标题
titlePosition	´outside´	设置标题显示的位置.可以设置成 ´outside´, ´inside´ 或 ´over´
titleFormat	null	可以自定义标题的格式
transitionIn, transitionOut	´fade´	设置动画效果. 可以设置为 ´elastic´, ´fade´ 或 ´none´
speedIn, speedOut	300	fade 和 elastic 动画切换的时间间隔, 以毫秒为单位
changeSpeed	300	切换时fancybox尺寸的变化时间间隔（即变化的速度），以毫秒为单位
changeFade	´fast´	切换时内容淡入淡出的时间间隔（即变化的速度）
easingIn, easingOut	´swing´	为 elastic 动画使用 Easing
showCloseButton	true	如果为true，则显示关闭按钮
showNavArrows	true	如果为true，则显示上一张下一张导航箭头
enableEscapeButton	true	如果为true，则启用ESC来关闭fancybox
onStart	null	回调函数，加载内容是触发
onCancel	null	回调函数，取消加载内容后触发
onComplete	null	回调函数，加载内容完成后触发
onCleanup	null	回调函数，关闭fancybox前触发
onClosed	null	回调函数，关闭fancybox后触发

更多API请访问http://fancybox.net/api