概要

Lightbox JS 是一個(gè)簡(jiǎn)單而又謙恭的用來(lái)把圖片覆蓋在當(dāng)前頁(yè)面上的腳本. 它能被快速安裝并且運(yùn)作于所有流行的瀏覽器.

例子

單一圖片

圖片集

如何使用:

步驟 1 - 安裝

Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果庫(kù). 你將需要外調(diào)這三個(gè) Javascript 文件在你的 header.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

外調(diào) Lightbox CSS 文件 (或添加 Lightbox 樣式到你現(xiàn)行的樣式表中).
```
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
```
檢查 CSS 并確定調(diào)用的 prev.gif 和 next.gif 文件在正確的位置. 同樣要確定調(diào)用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正確的位置.

步驟 2 - 激活

添加 rel="lightbox" 屬性到任何一個(gè)鏈接標(biāo)簽去激活lightbox. 例如:
```
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
```
可選擇項(xiàng): 使用 title 屬性加上說(shuō)明.
如果你有一套你想分組的相關(guān)圖片, 接著上一部并且又在 rel 屬性中添加一個(gè)帶方括號(hào)的組名. 例如:
```
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
```
沒(méi)有限定每個(gè)頁(yè)面的圖片組數(shù)量和每個(gè)圖片組圖片的數(shù)量. 瘋了！

下載:

Lightbox JS v2.02

修改日志

v2.02 - 修正了由多行說(shuō)明導(dǎo)致的布局問(wèn)題. 添加了用鍵盤(pán)來(lái)導(dǎo)航.
v2.01 - 修正了在IE6中的居中問(wèn)題(任何的 DOCTYPE). 使自適應(yīng)調(diào)整變得更流暢.

支持:

完全不工作. 圖片在新窗口中打開(kāi). 出什么問(wèn)題了?: 這一般是由 JS 腳本的沖突導(dǎo)致的. 檢查 body 標(biāo)簽并尋找 onload 屬性. 例如:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
對(duì)這個(gè)問(wèn)題的快速修正就是添加 initLightbox() 到 onload 屬性, 如下:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
如果我在頁(yè)面加載完之前點(diǎn)擊圖片, 它不工作.: 腳本只有在頁(yè)面完全加載完畢才能激活.
Flash 元素通過(guò)疊加出現(xiàn).: 參考 netasceta 的評(píng)論.
有圖像地圖的話(huà)腳本不工作.: 參考 Jason Buechler 的評(píng)論.
背影不延伸并覆蓋整個(gè)瀏覽器的窗口.: 從 body 標(biāo)簽中刪除默認(rèn)的 margin 和 padding. 添加 body{ margin: 0; padding: 0; } 到你的樣式表.
我能在說(shuō)明中插入鏈接嗎?: 能, 但是你必須轉(zhuǎn)換引號(hào), 大于號(hào)和小于號(hào)到html的相等實(shí)體. 例如:
<a href="images/image-4.jpg" rel="lightbox" title="<a href="link.html">my link</a>">Image</a>
我能用此腳本展示 flash, 視頻, 或其他內(nèi)容嗎?: 并沒(méi)有不在 box 的范圍內(nèi), 但如果你有勇氣嘗試, 可以打開(kāi)并修改代碼來(lái)滿(mǎn)足你的需求. 如果你能提供另一個(gè)選擇的話(huà), 你可以發(fā)送一個(gè)腳本到 Cody Lindley 的 ThickBox 專(zhuān)題中.
我能在商業(yè)項(xiàng)目中使用此腳本嗎?: 能. 此腳本在 Creative Commons Attribution 2.5 License 法律協(xié)議下. 能捐獻(xiàn)一點(diǎn)給我的話(huà)更好, 暗示暗示~.

聯(lián)系:

請(qǐng)使用消息板討論漏洞, 問(wèn)問(wèn)題, 和答疑解惑. 在開(kāi)始新的討論前, 請(qǐng)?jiān)?網(wǎng)絡(luò)日志里搜尋評(píng)論. 如果在回顧完網(wǎng)絡(luò)日志之后, 你的評(píng)論/想法/問(wèn)題仍然遺留的話(huà), 請(qǐng)?jiān)?消息板中發(fā)帖, 不要發(fā)在網(wǎng)絡(luò)日志中. 謝謝合作.

如果你想寫(xiě)信給我, 我的回復(fù)會(huì)因時(shí)而變, 我的電子郵件:

捐贈(zèng)

如果你很慷慨, 考慮一下捐贈(zèng)吧. 任何形式的捐贈(zèng)和所有的 PayPal 捐贈(zèng)我都真誠(chéng)地感激. 謝謝.

聲明:

此文版權(quán)歸 Lokesh Dhakar 所有, 由 croc 翻譯成中文. 因譯者的英文能力有限, 若有翻譯不當(dāng)之處, 請(qǐng)多多包涵! 不要用雞蛋扔我! 謝謝!

Lightbox JS v2.0

概要

最新更新 Version 2.0

例子