Jquery.fancybox1.3.4 — 使用教學

jquery.fancybox 1.3.4是個很方便的視窗套件

如果要綁定live的話就必須用$.fancybox呼叫

但是如果綁定live的話elastic就失去作用了

因為無法抓到物件的座標

只要修改幾行就可以自帶物件參數elementToClone

使它可以參考elementToClone的物件座標

使用方法如下面:

$('.ngbox').live('click',function(e)
{
	e.preventDefault()
	$.fancybox
	({
		'opacity'	: true,
		'transitionIn'	: 'elastic',
		'transitionOut'	: 'elastic',
		'elementToClone':$(this),
		'href'			:$(this).attr('href')
	});
});

把_get_zoom_from函氏改成下面這樣就可以了

_get_zoom_from = function() {
	var orig = selectedOpts.orig ? $(selectedOpts.orig) : false,
	from = {},
	pos,
	view;

	if (currentOpts.elementToClone && currentOpts.elementToClone.length) {
		pos = _get_obj_pos(currentOpts.elementToClone);

		from = {
			width : pos.width + (currentOpts.padding * 2),
			height : pos.height + (currentOpts.padding * 2),
			top	: pos.top - currentOpts.padding - 20,
			left : pos.left - currentOpts.padding - 20
			};

		}else if (orig && orig.length) {
			pos = _get_obj_pos(orig);

			from = {
				width : pos.width + (currentOpts.padding * 2),
				height : pos.height + (currentOpts.padding * 2),
				top	: pos.top - currentOpts.padding - 20,
				left : pos.left - currentOpts.padding - 20
			};
		}else {
			view = _get_viewport();

			from = {
				width : currentOpts.padding * 2,
				height : currentOpts.padding * 2,
				top	: parseInt(view[3] + view[1] * 0.5, 10),
				left : parseInt(view[2] + view[0] * 0.5, 10)
			};
		}

		return from;
	}

下面是一些參數設定欄杆

屬性名 默認值 說明
padding 10 瀏覽框內邊距,和css中的padding一個意思
margin 20 瀏覽框外邊距,和css中的margin一個意思
opacity false 如果為true,則fancybox在動畫改變的時候透明度可以跟著改變
modal false 如果為true,則’overlayShow’ 會被設成 ‘true’ , ‘hideOnOverlayClick’, ‘hideOnContentClick’, ‘enableEscapeButton’, ‘showCloseButton’ 會被設成 ‘false’
cyclic false 如果為true,相冊會循環播放
scrolling ‘auto’ 設置overflow的值來創建或隱藏滾動條,可以設置成 ‘auto’, ‘yes’, or ‘no’
width 560 設置iframe和swf的寬度,如果 ‘autoDimensions’為 ‘false’,這也可以設置普通文本的寬度
height 340 設置iframe和swf的高度,如果 ‘autoDimensions’為 ‘false’,這也可以設置普通文本的高度
autoScale true 如果為true,fancybox可以自適應瀏覽器窗口大小
autoDimensions true 在內聯文本和ajax中,設置是否動態調整元素的尺寸,如果為true,請確保你已經為元素設置了尺寸大小
centerOnScroll false 如果為true,當你滾動滾動條時,fancybox將會一直停留在瀏覽器中心
ajax { } 和jquery的ajax調用選項一樣 注意: ‘error’ and ‘success’ 這兩個回調事件會被fancybox重寫
swf {wmode: ‘transparent’} swf的設置選項
hideOnOverlayClick true 如果為true則點擊遮罩層關閉fancybox
hideOnContentClick false 如果為true則點擊播放內容關閉fancybox
overlayShow true 如果為true,則顯示遮罩層
overlayOpacity 0.3 遮罩層的透明度(範圍0-1)
overlayColor ‘#666’ 遮罩層的背景顏色
titleShow true 如果為true,則顯示標題
titlePosition ‘outside’ 設置標題顯示的位置.可以設置成 ‘outside’, ‘inside’ 或 ‘over’
titleFormat null 可以自定義標題的格式
transitionIn, transitionOut ‘fade’ 設置動畫效果. 可以設置為 ‘elastic’, ‘fade’ 或 ‘none’
speedIn, speedOut 300 fade 和 elastic 動畫切換的時間間隔, 以毫秒為單位
changeSpeed 300 切換時fancybox尺寸的變化時間間隔(即變化的速度),以毫秒為單位
changeFade ‘fast’ 切換時內容淡入淡出的時間間隔(即變化的速度)
easingIn, easingOut ‘swing’ 為 elastic 動畫使用 Easing
showCloseButton true 如果為true,則顯示關閉按鈕
showNavArrows true 如果為true,則顯示上一張下一張導航箭頭
enableEscapeButton true 如果為true,則啟用ESC來關閉fancybox
onStart null 回調函數,加載內容是觸發
onCancel null 回調函數,取消加載內容後觸發
onComplete null 回調函數,加載內容完成後觸發
onCleanup null 回調函數,關閉fancybox前觸發
onClosed null 回調函數,關閉fancybox後觸發

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *