下面介绍一款jquery图片播放插件叫Fancybox，项目主页地址：http://fancybox.net/

Fancybox的特点如下：

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

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

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

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

Fancybox使用方法：

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

<script type="text/javascript" src=http://www.mamicode.com/"/js/jquery-1.8.0.js"></script>>
可选-如果需要用到fancy transition(一些动画效果)你还需要引入以下脚本
<script type="text/javascript" src=http://www.mamicode.com/"/fancybox/jquery.easing-1.4.pack.js"></script>

可选-如果需要支持鼠标滚轮滚动效果你还需要引入以下脚本
<script type="text/javascript" src=http://www.mamicode.com/"/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

2、添加样式文件
<link rel="stylesheet" href=http://www.mamicode.com/"/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">

3、在页面上创建链接元素
A、图片元素
<a id="simple_1" href=http://www.mamicode.com/"/img/simple1.jpg">

B、普通文本
<a id="simple_2" href=http://www.mamicode.com/"#data" kesrc="#data">点击这里将显示文本>
C、Iframe
<a id="simple_3" href=http://www.mamicode.com/"http://www.baidu.com">Baidu

D、不同的动画风格
<a id="example1" href=http://www.mamicode.com/"/img/simple1.jpg">>
E、不同的标题位置
<a id="example5" href=http://www.mamicode.com/"/img/simple1.jpg" title="Learn a little bit every day.">>
F、以组的形式进行播放
<a rel="example_group" href=http://www.mamicode.com/"/img/simple1.jpg">>
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 ‘<span id="fancybox-title-over">Image ‘ + (currentIndex + 1) + ‘ / ‘
			+ currentArray.length + (title.length ? ‘   ‘ + title : ‘‘) + ‘</span>‘;
		}
	});
	
})
 </script>