jQuery Fancybox插件介绍详解编程语言

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

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 : '') + ''; 
		} 
	}); 
	 
}) 
 </script>