當(dāng)我們需要瀏覽一組圖片時(shí)，往往是采用彈出一個(gè)層來單獨(dú)顯示那些圖片的方法，這是通過jquery+css來實(shí)現(xiàn)的。可能在很多精通jquery和css的設(shè)計(jì)人員眼里認(rèn)為實(shí)現(xiàn)此功能并不復(fù)雜，不過本文要介紹并推薦給大家使用的是一個(gè)經(jīng)過了5年歷程的插件：colorbox。為什么選擇colorbox？這是因?yàn)榇瞬寮鸵粋€(gè)js文件，只有28k，可說是一個(gè)輕量級(jí)的插件，方便調(diào)用又不會(huì)拖慢網(wǎng)速，另外此插件是2009年3月就開發(fā)出來了，并且一直在更新，經(jīng)歷了上百次更新，現(xiàn)在最新版本Version 1.6.3 ，更新時(shí)間為2015年07月27。
▲colorbox: 彈出層瀏覽一組圖片
colorbox彈出層瀏覽一組圖片的應(yīng)用
在卡卡網(wǎng)的圖片壓縮優(yōu)化工具里，使用了colorbox來實(shí)現(xiàn)彈出層瀏覽一組圖片（原始圖和壓縮圖）的功能。
▲點(diǎn)擊圖片放大瀏覽原圖和壓縮圖
▲瀏覽原圖和壓縮圖（點(diǎn)擊上圖放大）
colorbox插件簡單實(shí)用，輕巧速度快，不像其他插件要加載一大堆文件，顯得臃腫又拖慢網(wǎng)速，對(duì)網(wǎng)站有不利影響，有種得此失彼的感覺。
colorbox使用范例
colorbox的使用是很簡單的，不需要你懂jquery，也不需要你懂css，只需要認(rèn)識(shí)一點(diǎn)html知識(shí)就行。
請(qǐng)先打開colorbox官方演示頁面。
▲colorbox演示
上圖中，點(diǎn)擊任何一個(gè)組里的任一鏈接，都會(huì)彈出一個(gè)層瀏覽該組圖片。效果看到了吧。
好了，我們現(xiàn)在就要在此基礎(chǔ)上進(jìn)行模仿，并能將效果應(yīng)用到自己的網(wǎng)頁里。
查看網(wǎng)頁的源文件（右鍵點(diǎn)擊網(wǎng)頁-查看源文件），下圖是截取了前面一段源代碼：
▲如何使用colorbox
上圖的源代碼清晰顯示了使用colorbox的方法，分為三個(gè)步驟：
1）、網(wǎng)頁引用三個(gè)文件：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的屬性值一致。
通過上述三個(gè)步驟，就可以在自己的網(wǎng)頁里使用colorbox的插件功能了。
最后附上colorbox插件的下載地址：
https://github.com/jackmoore/colorbox/archive/master.zip
你也可以進(jìn)入作者官方的網(wǎng)站了解更多關(guān)于colorbox的資料：
http://www.jacklmoore.com/colorbox/
特別注意，官網(wǎng)中的demo（演示）在國內(nèi)是運(yùn)行無效的，因?yàn)槠涫褂玫膉query.min.js是調(diào)用https://ajax.googleapis.com/的公共文件，而該網(wǎng)站在國內(nèi)打不開，從而造成網(wǎng)頁jquery文件加載失敗，自然無法彈出層了。
