概要

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

例子

單一圖片

圖片集

如何使用:

步驟 1 - 安裝

Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果庫. 你將需要外調(diào)這三個 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" 屬性到任何一個鏈接標(biāo)簽去激活lightbox. 例如:
```
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
```
可選擇項: 使用 title 屬性加上說明.
如果你有一套你想分組的相關(guān)圖片, 接著上一部并且又在 rel 屬性中添加一個帶方括號的組名. 例如:
```
<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>
```
沒有限定每個頁面的圖片組數(shù)量和每個圖片組圖片的數(shù)量. 瘋了！

下載:

Lightbox JS v2.02

修改日志

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

支持:

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

聯(lián)系:

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

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

捐贈

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

聲明:

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

Lightbox JS v2.0

概要

最新更新 Version 2.0

例子