最近很容易可以看到這個效果，也就是當您點選網頁中的圖片或連結時，背景會立即變暗並且出現 Loading... 然後跳出一個美美的方框顯示圖片或網頁，這種效果就叫做 Lightbox，底下收集了一些許多人開發或修改的 Lightbox，通常都會有 Demo，看個人喜好選擇囉。
‧Lightbox JS
典型也是最常見的一個，目前也出了 2.0 版，不過似乎只能顯示圖片而已。
‧ThickBox
這個也是很常見，可以顯示圖片、網頁，並且可指定方框的大小，推薦。
‧Greased Lightbox
提供裝在瀏覽器的擴充套件，平常看圖片時就會有 Lightbox 效果。
．GreyBox
這個就厲害了，除了可以用於圖片和網頁外、連 flash、影片都可以顯示在 Lightbox 彈出的方框裡面。
‧Lightbox Gone Wild!
也是可以顯示網頁、圖片，效果還不錯。
‧Lightbox plus
增加圖片縮放功能，對於圖片尺寸大於螢幕解析度時可以點選放大的圖示，觀看圖片完整尺寸。(由 RB 補充)
‧Lightbox Jojo
在顯示圖片前可以先瀏覽一張圖片，圖片開啟後可以在圖片的上個圖層再放一張圖片。(由 RB 補充)
網頁設計
Lightbox, Web 2.0
進入 Gmail、Calendar 等 Google 的服務，時常會看到右上角有個紅底白字的「載入中...」，拿來當第一個 Ajax 的練習。
基本作法就是利用一個 DIV 區塊，預設為不顯示，等到呼叫 JavaScript 建立 XMLHttpRequest 時，將 DIV 區塊設為顯示，最後等伺服器後端傳回訊息時再隱藏區塊即可。這個範例是使用者輸入訊息，由 PHP 處理並顛倒字串印出。
Demo
網頁部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Ajax Test</title>
<script type="text/javascript">
var ajax;
function createHttpRequest() {
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
return null;
}
}
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}
function ajaxSendRequest(url) {
var msg = document.getElementById('msg').value;
document.getElementById('loading').style.display = "block";
ajax = createHttpRequest();
ajax.onreadystatechange = showResult;
ajax.open("GET", url + '?message=' + msg);
ajax.send("");
}
function showResult() {
if (ajax.readyState == 4 && ajax.status == 200) {
document.getElementById('loading').style.display = "none";
document.getElementById('echo_msg').innerHTML = ajax.responseText;
}
}
</script>
<style type="text/css">
#loading {
position: absolute;
width: 50px;
height: 20px;
line-height: 20px;
top: 5px;
right: 5px;
font-size: 12px;
background-color: #C44;
color: #FFF;
text-align: center;
}
</style>
</head>
<body>
<div id="loading" style="display:none">載入中...</div>
請輸入英文訊息：<input type="text" id="msg" /><br />
<div id="echo_msg"></div>
<input type="submit" id="Submit" value="送出" onclick="ajaxSendRequest('echo.php')" />
</body>
</html>
PHP 部分：
<?php
$message = $_GET['message'];
sleep(2); // 睡一下吧,不然"載入中"會太快消失
echo strrev($message);
?>
Ajax, 程式筆記
Ajax, Gmail, Web 2.0
如果還不知道什麼是 WEB 標準、什麼是 W3C，或者你的網頁只能在 IE 正常瀏覽，換到其他瀏覽器就完全走樣，那就更應該看這本書。從不符合標準網頁所產生的問題開始，完整的帶領我們進入 WEB 標準的世界，並且以專題形式撰寫符合標準的網頁，是一本觀念很完整的書。
好書好站
Web 2.0, 網頁設計
想要寫出符合 Web Standards 又美觀的網頁，CSS 的運用一定是少不了的，所以幾個月前買了幾本 CSS 的書籍，這本書列出了 101 個將 CSS 運用在網頁上常會遇到的問題和技巧。尤其是後面的『CSS 定位與版型』，對設計 Web Standards 網頁有非常大的幫助。
好書好站
css, Web 2.0, 網頁設計
近期迴響