jQueryFancybox插件介绍

下面介绍一款jquery图片播放插件叫Fancybox， 

Fancybox的特点如下：

1、可以支持图片、html文本、flash动画、iframe以及ajax的支持

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

3、可以以组的形式进行播放，导航的按钮（上一项，下一项）

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

5、Fancybox播放器支持投影，更有立体的感觉

Fancybox使用方法：

1、引入jquery核心库和Fancybox插件库

 

<script type=text/javascript src=/js/jquery-1.8.0.js>《script》<script type=text/javascript src=/fancybox/jquery.fancybox-1.3.4.pack.js>《script》

可选-如果需要用到fancy transition(一些动画效果)你还需要引入以下脚本

 

 

<script type=text/javascript src=/fancybox/jquery.easing-1.4.pack.js>《script》

可选-如果需要支持鼠标滚轮滚动效果你还需要引入以下脚本

 

 

<script type=text/javascript src=/fancybox/jquery.mousewheel-3.0.4.pack.js>《script》

2、添加样式文件

 

 

3、在页面上创建链接元素

 

A、图片元素

 

4、jquery实现效果

 

 

<script type=text/javascript>$(function(){	$(a#simple_1).fancybox(); //图片元素	$(a#simple_2).fancybox(); //普通文本	$(#simple_3).fancybox({   //iframe元素 		'width'			: '75%',		'height'		: '75%',		'autoScale'		: false,		'transitionIn'		: 'none',		'transitionOut'		: 'none',		'type'			: 'iframe'	});		//不同的动画风格	$(a#example1).fancybox();	$(a#example2).fancybox({		'overlayShow'	: false,		'transitionIn'	: 'elastic',		'transitionOut'	: 'elastic'	});	$(a#example3).fancybox({		'transitionIn'	: 'none',		'transitionOut'	: 'none'		});	$(a#example4).fancybox({		'opacity'	: true,		'overlayShow'	: false,		'transitionIn'	: 'elastic',		'transitionOut'	: 'none'	});		//不同的标题位置	$(a#example5).fancybox();	$(a#example6).fancybox({		'titlePosition'		: 'outside',		'overlayColor'		: '#000',		'overlayOpacity'	: 0.9	});	$(a#example7).fancybox({		'titlePosition'	: 'inside'	});	$(a#example8).fancybox({		'titlePosition'	: 'over'	});		//以组的形式进行播放	$(a[rel=example_group]).fancybox({		'transitionIn'		: 'none',		'transitionOut'		: 'none',		'titlePosition' 	: 'over',		'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {			return 'Image ' + (currentIndex + 1) + ' / '			+ currentArray.length + (title.length ? '   ' + title : '') + '';		}	});	}) 《script》