liangcmwn

首先大概明確下什么是lightbox效果：

A script (JavaScript) that allows you to focus the users attention on a particular portion of the screen. It creates the equivalent of a modal dialog box - this means that while the user looks at this focused part of the screen, they can't interact with the rest of the screen.

精簡(jiǎn)版js 代碼不到6K，基于prototype（自帶1.4，但大致兼容1.6，無需script.aculo.us庫，自然也沒什么養(yǎng)眼的特效，這是保持瘦身的 秘訣）。但似乎精簡(jiǎn)過頭了，稍微擴(kuò)展了下，加入了直接開窗口的方法，并支持窗口頁面載入完畢后及窗口關(guān)閉后的回調(diào)事件，以適合項(xiàng)目使用。

待整理。

順便整理下市面上現(xiàn)有 lightbox 作品：

Lightbox JS，（作者是Lokesh Dhakar），是所有l(wèi)ightbox效果的始祖版，獨(dú)立實(shí)現(xiàn)（不依賴公共JS庫），代碼較為松散，但顯然他的地位意義不在于他的代碼，而是他的“效果”。在這個(gè)基礎(chǔ)上衍生了很多“衍生版”的lightbox，包括上面所HACK的精簡(jiǎn)版。
最新版本1/19/06，支持鍵盤快捷鍵來關(guān)閉窗口。

Lightbox JS 現(xiàn)在發(fā)展到了Lightbox JS v2.0 (中文介紹)，基于prototype+Lytebox 和ThickBox 。
最新版為：v2.04 Released 3/09/08。

Litebox，物如其名，是Lightbox JS v2.0 的精簡(jiǎn)版（但效果完全實(shí)現(xiàn)，不多也不少），基于moo.fix （prototype的精簡(jiǎn)版prototype.lite.js 3KB + mootools的特效庫moo.fix.js 3KB），其中l(wèi)ightbox 效果實(shí)現(xiàn)代碼litebox.js 18KB，全部文件合并壓縮后約16KB左右，也可只用moo.fix.js + litebox.js 配合完整的prototype.js 使用。

Lytebox 是Lightbox JS v2.0 的衍生版，同樣也是基于prototype+script.aculo.us，展示效果也跟Lightbox JS v2.0 完全一樣，還可以用iframe展示內(nèi)容，以便可以展示頁面、Flash等更豐富的內(nèi)容。但JS文件較大，接近40K。
最新版為：October 2, 2007 v3.22

GreyBox，22KB，獨(dú)立實(shí)現(xiàn)，JS文件不少，設(shè)置也稍嫌麻煩，效果中規(guī)中矩。

GreyBox Redux，JS文件僅2KB，是GreyBox的jQuery 簡(jiǎn)單實(shí)現(xiàn)版，就是用個(gè)iframe來框住外部頁，但還依賴最少2個(gè)圖片+1個(gè)CSS文件類配合，只適合特殊場(chǎng)合臨時(shí)用一下。

ThickBox （ThickBox類中的經(jīng)典作品，中文演示），是基于jQuery的，是作者 Cody Lindley 既不滿足Lightbox只能展示圖片又不喜歡prototype+script.aculo.us組合的體積，就根據(jù)Greybox的功能用jQuery實(shí)現(xiàn)，而且是被

Lightbox Gone Wild，是Lightbox JS的 衍生版，基于prototype，只需兩個(gè)文件（除prototype.js之外），一個(gè)js (6KB，代碼有精煉的余地)，一個(gè)css，只支持用AJAX讀取頁面內(nèi)容然后用lightbox效果展示，只是半透明置頂層，無絢麗的動(dòng)態(tài)載入效果，也 無自動(dòng)縮放，居中也是靠CSS，但視乎很受歡迎（2年來600多個(gè)留言，而且還繼續(xù)增長中。。）

Slimbox，大概是基于MooTools 版的最佳實(shí)現(xiàn)了，只有6KB，功能卻跟Lightbox JS v2.0 完全一樣，而且背景淡出效果更為平滑（在線演示），是MooTools 用戶的不二選擇，而且目前還在活躍更新中。
最新版為：Slimbox 1.62 （Jun 01 2008）for MooTools 1.2

Shadowbox.js，（作者Michael J. I. Jackson）則可算是 lightbox 中的戰(zhàn)斗機(jī)，號(hào)稱支持市面常見的公共JS庫：
    * Yahoo! User Interface Library
    * Ext (standalone)
    * Prototype + Scriptaculous
    * jQuery
    * MooTools (requires Fx.Styles and its dependancies)
    * Dojo Toolkit

展示效果基本跟 Lightbox JS v2.0 一樣，而且支持外部頁面、Flash等多媒體。十分具有開源風(fēng)范，js代碼跟分為源碼包（帶詳細(xì)注釋）、生產(chǎn)用包（去注釋去空格換行等，約31KB，而各 種公共JS庫的接口文件不到2KB，但感覺還有使用公共JS庫的必要了嗎？）

prototype-window ，可以看作是旗艦版的thickbox by prototype+script.aculo.us，而且物如其名，已經(jīng)不再是小打小鬧的box級(jí)工具，而是完全的模擬窗口實(shí)現(xiàn)，窗口特效中的縮放啊、 震動(dòng)啊，要多牛逼有多牛逼。當(dāng)然文件size也是旗艦級(jí)的（若要用好，必需還得引入一堆theme文件，包括CSS和圖片），這也是唯一的缺點(diǎn)，適合“企 業(yè)級(jí)”需求。

到j(luò)Query插件庫及WIKI中找了下，發(fā)現(xiàn)似乎沒有 Lightbox JS v2.0 的純jQuery 完全實(shí)現(xiàn)版（展示效果一樣的），只找到近似的（但均只能展示圖片）：
jQuery Lightbox Plugin (balupton edition) 這個(gè)在IE6中打開會(huì)掛起，在FF中正常。

lightbox by Warren Kewenki （效果細(xì)節(jié)不到位，如在IE中圖片加載前不會(huì)自動(dòng)居中）
Based on Lightbox 2 by Lokesh Dhakar. Originally written to make use of the Prototype framework, and Script.acalo.us, now altered to use jQuery.

其他人的整理：

6種lightbox效果源代碼下載（帶在線演示）（原文，空間已過期）

各種 lightbox 實(shí)現(xiàn)

lightbox效果的最簡(jiǎn)單實(shí)現(xiàn)原理

Which Lightbox is right for you?