利用Lightbox JS指令碼顯示圖片於整個頁面上
阿新 • • 發佈：2019-01-07
Lightbox JS 是一個簡單而又謙恭的用來把圖片覆蓋在當前頁面上的指令碼. 它能被快速安裝並且運作於所有流行的瀏覽器.
如何使用:
步驟 1 - 安裝
- Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果庫. 你將需要外調這三個 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> - 外調 Lightbox CSS 檔案 (或新增 Lightbox 樣式到你現行的樣式表中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> - 檢查 CSS 並確定呼叫的
prev.gif和next.gif檔案在正確的位置. 同樣要確定呼叫的loading.gif和close.gif檔案及lightbox.js檔案在正確的位置.
步驟 2 - 啟用
- 新增
rel="lightbox"屬性到任何一個連結標籤去啟用lightbox. 例如:
可選擇項: 使用<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>title屬性加上說明. - 如果你有一套你想分組的相關圖片, 接著上一部並且又在 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>
支援:
- 1. 完全不工作. 圖片在新視窗中開啟. 出什麼問題了?
- 這一般是由 JS 指令碼的衝突導致的. 檢查 body 標籤並尋找 onload 屬性. 例如:<body
onload="MM_preloadImages(‘/images/menu_on.gif’)…;">對這個問題的快速修正就是新增
initLightbox()到 onload 屬性, 如下: <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">- 2.如果我在頁面載入完之前點選圖片, 它不工作:指令碼只有在頁面完全載入完畢才能啟用.
- 3.Flash 元素通過疊加出現.
- 4.有影象地圖的話指令碼不工作.
- 5.背影不延伸並覆蓋整個瀏覽器的視窗:從 body 標籤中刪除預設的 margin 和 padding. 新增
body{ margin: 0; padding: 0; }到你的樣式表. - 6.能在說明中插入連結嗎?能, 但是你必須轉換引號, 大於號和小於號到html的相等實體. 例如:
<a href="images/image-4.jpg" rel="lightbox" title="<a href="link.html">my link</a>">Image</a>- 7.我能用此指令碼展示 flash, 視訊, 或其他內容嗎?並沒有不在 box 的範圍內, 但如果你有勇氣嘗試, 可以開啟並修改程式碼來滿足你的需求. 如果你能提供另一個選擇的話, 你可以傳送一個指令碼到 Cody Lindley 的ThickBox專題中.
下載地址:http://www.blueidea.com/articleimg/2006/08/3904/lightbox2.02.zip.