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


3、在頁面上創建鏈接元素

A、圖片元素

B、普通文本

vcD48cD48L3A+PHByZSBjbGFzcz0=”brush:java;”>點擊這裡將顯示文本

那片笑聲讓我想起我的那些花兒,在我生命每個角落靜靜為我開著.

C、Iframe

Baidu

D、不同的動畫風格

example1
example2
example3
example4

E、不同的標題位置

example4
example5
example6
example7

F、以組的形式進行播放


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>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *