jQuery Fancybox插件介绍

下面介绍一款jquery图片播放插件叫Fancybox，文章来源：http://www.itnose.net/detail/6040446.html

更多文章：http://www.itnose.net/type/111.html

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、添加样式文件 

 

 

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">

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

 

A、图片元素

 

<a id="simple_1" href="/img/simple1.jpg"><img src="/img/simple1.jpg" alt=""/></a>

B、普通文本 

 

 

<a id="simple_2" href="#data" kesrc="#data">点击这里将显示文本</a>
<div style="display: none;">
    <div id="data">那片笑声让我想起我的那些花儿，在我生命每个角落静静为我开着.</div>
</div>

C、Iframe 

 

 

<a id="simple_3" href="http://www.baidu.com">Baidu</a>

D、不同的动画风格 

 

 

<a id="example1" href="/img/simple1.jpg"><img alt="example1" src="/img/simple1.jpg" /></a>
<a id="example2" href="/img/simple1.jpg"><img alt="example2" src="/img/simple1.jpg" /></a>
<a id="example3" href="/img/simple1.jpg"><img alt="example3" src="/img/simple1.jpg" /></a>
<a id="example4" href="/img/simple1.jpg"><img class="last" alt="example4" src="/img/simple1.jpg" /></a>

E、不同的标题位置 

 

 

<a id="example5" href="/img/simple1.jpg" title="Learn a little bit every day."><img alt="example4" src="/img/simple1.jpg" /></a>
<a id="example6" href="/img/simple1.jpg" title="Learn a little bit every day."><img alt="example5" src="/img/simple1.jpg" /></a>
<a id="example7" href="/img/simple1.jpg" title="Learn a little bit every day."><img alt="example6" src="/img/simple1.jpg" /></a>
<a id="example8" href="/img/simple1.jpg" title="Learn a little bit every day."><img class="last" alt="example7" src="/img/simple1.jpg" /></a>

F、以组的形式进行播放 

 

 

<a rel="example_group" href="/img/simple1.jpg"><img alt="" src="/img/simple1.jpg" /></a>
<a rel="example_group" href="/img/simple2.jpg"><img alt="" src="/img/simple2.jpg" /></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 '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / '
			+ currentArray.length + (title.length ? '   ' + title : '') + '</span>';
		}
	});
	
})
 </script>