概要
Lightbox JS 是一個(gè)簡(jiǎn)單而又謙恭的用來把圖片覆蓋在當(dāng)前頁面上的腳本. 它能被快速安裝并且運(yùn)作于所有流行的瀏覽器.
最新更新 Version 2.0
- 圖片集: 分組相關(guān)的圖片并且能輕松的導(dǎo)航它們
- 視覺特效: 奇特的自適應(yīng)調(diào)整
- 向后兼容: yes!
例子
單一圖片
圖片集
如何使用:
步驟 1 - 安裝
- Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果庫. 你將需要外調(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. 例如:
可選擇項(xiàng): 使用<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>title屬性加上說明. - 如果你有一套你想分組的相關(guān)圖片, 接著上一部并且又在 rel 屬性中添加一個(gè)帶方括號(hào)的組名. 例如:
沒有限定每個(gè)頁面的圖片組數(shù)量和每個(gè)圖片組圖片的數(shù)量. 瘋了！<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>
下載:
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’)…;">
對(duì)這個(gè)問題的快速修正就是添加initLightbox()到 onload 屬性, 如下:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()"> - 如果我在頁面加載完之前點(diǎn)擊圖片, 它不工作.
- 腳本只有在頁面完全加載完畢才能激活.
- Flash 元素通過疊加出現(xiàn).
- 參考 netasceta 的 評(píng)論.
- 有圖像地圖的話腳本不工作.
- 參考 Jason Buechler 的 評(píng)論.
- 背影不延伸并覆蓋整個(gè)瀏覽器的窗口.
- 從 body 標(biāo)簽中刪除默認(rèn)的 margin 和 padding. 添加
body{ margin: 0; padding: 0; }到你的樣式表. - 我能在說明中插入鏈接嗎?
- 能, 但是你必須轉(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)容嗎?
- 并沒有不在 box 的范圍內(nèi), 但如果你有勇氣嘗試, 可以打開并修改代碼來滿足你的需求. 如果你能提供另一個(gè)選擇的話, 你可以發(fā)送一個(gè)腳本到 Cody Lindley 的 ThickBox 專題中.
- 我能在商業(yè)項(xiàng)目中使用此腳本嗎?
- 能. 此腳本在 Creative Commons Attribution 2.5 License 法律協(xié)議下. 能捐獻(xiàn)一點(diǎn)給我的話更好, 暗示 暗示~.
聯(lián)系:
請(qǐng)使用 消息板 討論漏洞, 問問題, 和答疑解惑. 在開始新的討論前, 請(qǐng)?jiān)?網(wǎng)絡(luò)日志 里搜尋評(píng)論. 如果在回顧完網(wǎng)絡(luò)日志之后, 你的評(píng)論/想法/問題仍然遺留的話, 請(qǐng)?jiān)?消息板 中發(fā)帖, 不要發(fā)在網(wǎng)絡(luò)日志中. 謝謝合作.
如果你想寫信給我, 我的回復(fù)會(huì)因時(shí)而變, 我的電子郵件:
捐贈(zèng)
如果你很慷慨, 考慮一下捐贈(zèng)吧. 任何形式的捐贈(zèng)和所有的 PayPal 捐贈(zèng)我都真誠地感激. 謝謝.