Colorbox – a jQuery lightbox

cloorbox 的 jQuery lightbox 還蠻不錯的 不用特別去調整 大致上都能正常去使用
不過在設定關閉時間就有點差強人意了

 setTimeout($.colorbox.next, 1500);

綜合以上問題 自己做了點整理

html:

<link rel="stylesheet" href="/colorbox/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/colorbox/jquery.colorbox.js"></script>

<button onclick="lightbox('<h1>Welcome</h1>')" >不自動關閉</button>
<button onclick="lightbox('<h1>Welcome</h1>',5)" >5秒自動關閉</button>
<button onclick="lightbox_html('//網站.com.tw/','80%','80%')" >網頁box</button>

js:

//lightbox_html('內容',寬,高)
function lightbox_html(str_url,cbox_width = "",cbox_height = "") {
	$.colorbox({
		iframe:true
		,href:str_url
		,width:cbox_width
		,height:cbox_height
	});
}

//lightbox('內容',顯示秒數,寬,高)
function lightbox(str_html,cbox_close_sec = 0,cbox_width = "",cbox_height = "") {
	cbox_close_sec = Number(cbox_close_sec);
	tf_cbox_close_sec = (cbox_close_sec > 0);
	cbox_close = 0;

	if (tf_cbox_close_sec) {
		$.colorbox({
			html:"<div style='text-align: center;'><div id='cbox_close_sec'>"+cbox_close_sec+"秒後關閉...</div>"+str_html+"</div>"
			,width:cbox_width
			,height:cbox_height
		});
		setTimeout(function() { $.colorbox.close() }, cbox_close_sec * 1000);
		setTimeout(function() { f_cbox_close_sec(cbox_close_sec); }, 1000);
	}else{
		$.colorbox({
			html:"<div style='text-align: center;'>"+str_html+"</div>"
			,width:cbox_width
			,height:cbox_height
		});
	}
}

$(document).bind('cbox_closed',function(){
	cbox_close_sec = 0;
	cbox_close = 1;
});

function f_cbox_close_sec(cbox_close_sec) {
	if (cbox_close_sec >= 1) cbox_close_sec = cbox_close_sec - 1;
	$('#cbox_close_sec').text(cbox_close_sec+"秒後關閉...");
	if (cbox_close_sec <= 0 || cbox_close == 1){
		return;	
	}else{
		setTimeout(function() { cbox_close_sec = f_cbox_close_sec(cbox_close_sec); }, 1000);
	}
}

以下為相關內容

Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+

• Supports photos, grouping, slideshow, ajax, inline, and iframed content.
• Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
• Appearance is controlled through CSS so it can be restyled.
• Can be extended with callbacks & event-hooks without altering the source files.
• Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
• Preloads upcoming images in a photo group.
• Currently in use on a million-plus websites.

Instructions & Help

The FAQ has instructions on asking for help, solutions to common problems, and how-to examples. First-time jQuery users can check out the Colorbox Beginner’s Guide. Intermediate users can probably glean everything needed by view-source’ing the demo pages.

Usage

Colorbox accepts settings from an object of key/value pairs, and can be assigned to any HTML element.

// Format:
$(selector).colorbox({key:value, key:value, key:value});

// Examples:
// Image links displayed as a group
$('a.gallery').colorbox({rel:'gal'});

// Ajax
$('a#login').colorbox();

// Called directly, without assignment to an element:
$.colorbox({href:"thankyou.html"});

// Called directly with HTML
$.colorbox({html:"<h1>Welcome</h1>"});

// Colorbox can accept a function in place of a static value:
$("a.gallery").colorbox({rel: 'gal', title: function(){
  var url = $(this).attr('href');
  return '<a href="' + url + '" target="_blank">Open In New Window</a>';
}});

Settings

// Using a selector:
$("#inline").colorbox({inline:true, href:"#myForm"});

Public Methods

Event Hooks

These event hooks fire at the same time as their corresponding callbacks (i.e. cbox_complete & onComplete), but can be used to make a universal change to Colorbox, while callbacks are only applied to selected elements.

// Example of using an event listener and public method to build a primitive slideshow:
$(document).bind('cbox_complete', function(){
  setTimeout($.colorbox.next, 1500);
});

來源： Colorbox – a jQuery lightbox