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.

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

待整理。

順便整理下市面上現有 lightbox 作品：

Lightbox JS，（作者是Lokesh Dhakar），是所有lightbox效果的始祖版，獨立實現（不依賴公共JS庫），代碼較為松散，但顯然他的地位意義不在于他的代碼，而是他的“效果”。在這個基礎上衍生了很多“衍生版”的lightbox，包括上面所HACK的精簡版。
最新版本1/19/06，支持鍵盤快捷鍵來關閉窗口。

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

Litebox，物如其名，是Lightbox JS v2.0 的精簡版（但效果完全實現，不多也不少），基于moo.fix （prototype的精簡版prototype.lite.js 3KB + mootools的特效庫moo.fix.js 3KB），其中lightbox 效果實現代碼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展示內容，以便可以展示頁面、Flash等更豐富的內容。但JS文件較大，接近40K。
最新版為：October 2, 2007 v3.22

GreyBox，22KB，獨立實現，JS文件不少，設置也稍嫌麻煩，效果中規中矩。

GreyBox Redux，JS文件僅2KB，是GreyBox的jQuery 簡單實現版，就是用個iframe來框住外部頁，但還依賴最少2個圖片+1個CSS文件類配合，只適合特殊場合臨時用一下。

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

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

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

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

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

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

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

lightbox by Warren Kewenki （效果細節不到位，如在IE中圖片加載前不會自動居中）
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 實現

lightbox效果的最簡單實現原理

Which Lightbox is right for you?