OECSPACE -「Lightbox JS v2.0 透明層圖像預覽 」
Lightbox JS v2.0 透明層圖像預覽
Lightbox JS 2.0 是Lightbox JS演進版本,不需一張張的開啟, 只要開啟一張圖,滑鼠移到圖片上便可以上下張的方式進行預覽,且有動態伸縮效果,更增加預覽圖片的高美觀特色, 同樣的相容於 IE/NS/Firefox 等瀏覽器,獨立的JS讓安裝更容易.下載JS、CSS和必要圖檔 放置於網頁目錄下
<script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
單張圖片
<a href="photo.jpg" rel="lightbox" title="Lightbox JS"> Lightbox JS </a>
多張圖片,顯示上下頁
<a href="img/photo1.jpg" rel="lightbox[roadtrip]" title="Lightbox JS 2.0">image #1</a> <a href="img/photo2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="img/photo3.jpg" rel="lightbox[roadtrip]">image #3</a>
<a href="img/photo4.jpg" rel="lightbox[roadtrip]">image #4</a>
<a href="img/photo5.jpg" rel="lightbox[roadtrip]">image #5</a>
- 顯示於下方的說明文字設定於連結標籤的title="xxx"
- 若在說明文字使用連結,如以下的代碼寫法:
<a href="images/image-4.jpg" rel="lightbox" title="<a href="link.html">my link</a>">Image</a> - 如果網頁中有放置 Flash 在開啟效果時會顯示在上層擋住圖檔,解決方式:
在 flash 的 Object 標籤加入參數：
<param name="wmode" value="transparent">
在 embed 標籤加入參數：
wmode="transparent"
- 程式作者 Lokesh Dhakar