Lightbox2 網頁 JavaScript 秀圖機在 Xuite 應用的方法，我的實作的經驗如下（不保證正確）：
一、先在 Lightbox2 下載 Lightbox v2.03.3 ，將下載的 zip 檔解開到一個被我命名為「 Lightbox 」的資料夾中。
二、在「 Lightbox 」的資料夾中，index.html 是與 Lightbox2 首頁完全相同內容的說明文件，另外有「 CSS」 「images」「js」等三個資料夾，這三個資料夾裡面的檔案，我將於修改其中兩個檔案後，全部上載到「我的網頁空間」裡。（「我的網頁空間」即為自己私人的網頁空間，例如自己架設的網頁伺服器，或 ISP 業者提供的網頁空間）
三、唯一的門檻即為必須擁有自己的網頁空間。
四、修改一：修改「lightbox.css」，尋找「.gif」字串，將其「相對位址」修改為上載後自己的網頁空間的「絕對位址」。
五、修改二：修改「lightbox.css」，尋找「imageDataContainer」字串，將「font: 10px 」修改為「font: 11pt 」，並將「#imageData #caption{ font-weight: bold; }」修改為「#imageData #caption{ font-weight: normal; }」，目的在於調整中文字體至適合肉眼可視的程度。
六、修改三：修改「lightbox.js」，尋找「.gif」字串，將其「相對位址」修改為上載後自己的網頁空間的「絕對位址」。
七、將「 Lightbox 」資料夾裡的檔案全部上載到「我的網頁」空間裡。
八、 Lightbox2 首頁 「How to Use Part 1 - Setup」提到：必須將以下三段 Script 放到 網頁的 <head>裡，而在 Xuite ，可直接將其放在文件的「 HTML 原始碼」的開頭處。注意："src="裡的".js"均須修改為自己的網頁空間的絕對位址。
<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>
九、接下來，將 "<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />" 貼在前面三段 Script 的後面，同樣，必須將"href="的".css"修改為自己的網頁空間的絕對位址。
十、單張秀圖語法：
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
十一、組圖秀圖語法：
<a href="images/image-1.jpg" rel="lightbox[roadtrip]" title="my caption">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]" title="my caption">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]" title="my caption">image #3</a>
十二、縮圖秀圖語法：
<a href="images/image-1.jpg" rel="lightbox[roadtrip]"
title="my caption"><img src="images/thumbnail.jpg" alt="" ></a>
縮圖連結例#1
沒有留言:
張貼留言