一、先在 Lytebox 下載 Lytebox v3.22 ，將下載的 zip 檔解開到一個被我命名為「 Lytebox 」的資料夾中。
二、在「 Lytebox 」的資料夾中，有 lytebox.js 、lytebox.css兩個檔案，及一個 images 資料夾。我將於修改 lytebox.js 、lytebox.css兩個檔案後，全部上載到「我的網頁空間」裡。（「我的網頁空間」即為自己私人的網頁空間，例如自己架設的網頁伺服器，或 ISP 業者提供的網頁空間）
三、唯一的門檻即為必須擁有自己的網頁空間。
四、修改一：修改「lytebox.css」，將 #lbCaption 修改為 { display: block; font: 11pt Verdana, Helvetica, sans-serif; font-weight: normal; }，目的在於調整中文字體至適合肉眼可視的程度。
五、修改二：修改「lytebox.js」，將 this.autoResize 修改為 = false;，禁止 lytebox 自動調整影像大小。（其他調整以後再研究）
六、將「 Lytebox 」資料夾裡的檔案全部上載到「我的網頁」空間裡。
七、 Lytebox 提到：必須將以下兩段 Script 放到網頁的 <head>裡，而在 Xuite ，可直接將其放在文件的「 HTML 原始碼」裡。注意："src="均須修改為自己的網頁空間的絕對位址。
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
八、單張秀圖語法：
<a href="images/image-1.jpg" rel="lytebox" title="my caption">image #1</a>
九、組圖秀圖語法：
<a href="images/image-1.jpg" rel="lytebox[vacation]" title="my caption">image #1</a>
<a href="images/image-2.jpg" rel="lytebox[vacation]" title="my caption">image #2</a>
<a href="images/image-3.jpg" rel="lytebox[vacation]" title="my caption">image #3</a>
十、幻燈機秀圖語法：
<a href="images/image-1.jpg" rel="lyteshow[vacation]" title="my caption">image #1</a>
<a href="images/image-2.jpg" rel="lyteshow[vacation]" title="my caption">image #2</a>
<a href="images/image-3.jpg" rel="lyteshow[vacation]" title="my caption">image #3</a>
十一、縮圖秀圖語法：
<a href="images/image-1.jpg" rel="lytebox[vacation]"
title="my caption"><img src="images/thumbnail.jpg" alt="" ></a>
十二、HTML Content 語法：
<a href="http://www.google.com" rel="lyteframe" title="Search Google" rev="width: 400px; height: 300px; scrolling: no;">Google Search</a>
<a href="catalog1.htm" rel="lyteframe[catalog]" title="Summer Catalog">Summer Catalog</a>
<a href="catalog1.htm" rel="lyteframe[catalog]" title="Winter Catalog">Winter Catalog</a>
沒有留言:
張貼留言