當我們需要瀏覽一組圖片時，往往是采用彈出一個層來單獨顯示那些圖片的方法，這是通過jquery+css來實現的。可能在很多精通jquery和css的設計人員眼里認為實現此功能并不復雜，不過本文要介紹并推薦給大家使用的是一個經過了5年歷程的插件：colorbox。為什么選擇colorbox？這是因為此插件就一個js文件，只有28k，可說是一個輕量級的插件，方便調用又不會拖慢網速，另外此插件是2009年3月就開發(fā)出來了，并且一直在更新，經歷了上百次更新，現在最新版本Version 1.6.3 ，更新時間為2015年07月27。
▲colorbox: 彈出層瀏覽一組圖片
colorbox彈出層瀏覽一組圖片的應用
在卡卡網的圖片壓縮優(yōu)化工具里，使用了colorbox來實現彈出層瀏覽一組圖片（原始圖和壓縮圖）的功能。
▲點擊圖片放大瀏覽原圖和壓縮圖
▲瀏覽原圖和壓縮圖（點擊上圖放大）
colorbox插件簡單實用，輕巧速度快，不像其他插件要加載一大堆文件，顯得臃腫又拖慢網速，對網站有不利影響，有種得此失彼的感覺。
colorbox使用范例
colorbox的使用是很簡單的，不需要你懂jquery，也不需要你懂css，只需要認識一點html知識就行。
請先打開colorbox官方演示頁面。
▲colorbox演示
上圖中，點擊任何一個組里的任一鏈接，都會彈出一個層瀏覽該組圖片。效果看到了吧。
好了，我們現在就要在此基礎上進行模仿，并能將效果應用到自己的網頁里。
查看網頁的源文件（右鍵點擊網頁-查看源文件），下圖是截取了前面一段源代碼：
▲如何使用colorbox
上圖的源代碼清晰顯示了使用colorbox的方法，分為三個步驟：
1）、網頁引用三個文件：colorbox.css、jquery.min.js、jquery.colorbox.js，要注意路徑正確。
2）為同組圖片的鏈接里加上相同的屬性rel，例如rel="example1"、rel="example2"、rel="andy"等等。
3）在jquery里加上一句執(zhí)行語句，例如：$("a[rel='example1']").colorbox(); ，要注意，這里面的“example1”要與2）里自定義的rel的屬性值一致。
通過上述三個步驟，就可以在自己的網頁里使用colorbox的插件功能了。
最后附上colorbox插件的下載地址：
https://github.com/jackmoore/colorbox/archive/master.zip
你也可以進入作者官方的網站了解更多關于colorbox的資料：
http://www.jacklmoore.com/colorbox/
特別注意，官網中的demo（演示）在國內是運行無效的，因為其使用的jquery.min.js是調用https://ajax.googleapis.com/的公共文件，而該網站在國內打不開，從而造成網頁jquery文件加載失敗，自然無法彈出層了。
