jQuery图片弹出层插件fancyBox下载_fancyBox参数说明及使用方法
2015-01-14 12:58:37  By: dwtedx

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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+