JS實現點擊圖片在目前頁面放大並可關閉的漂亮效果_javascript技巧

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

點擊這裡查看實例演示

如何使用:

步驟1 - 安裝
1、Lightbox v2.0 使用Prototype 框架和Scriptaculous 效果庫. 你將需要外調這三個Javascript 檔案在你的header.





2、外調Lightbox CSS 檔案(或新增Lightbox 樣式到你現行的樣式表).

3、檢查CSS 並確定調用的prev.gif 和next.gif 檔案在正確的位置. 同樣要確定調用的loading.gif 和close.gif 檔案及lightbox.js 檔案在正確的位置.

步驟2 - 啟動 1、新增rel="lightbox" 屬性到任何一個連結標籤去啟動lightbox. 例如:

image #1
可選擇項目: 使用title 屬性加上說明. 2、如果你有一套你想分組的相關圖片, 接著上一部並且又在rel 屬性中添加一個帶方括號的組名. 例如:
image #1
image #2

image #3
3、沒有限定每個頁的圖片組數量和每個圖片組圖片的數量. 瘋了！ 下載: Lightbox JS v2.02