Lightview 介紹

幾個特色先介紹一下

• 展開圖檔未於視窗中間的絕對位置，即使視窗上下滑動也不會跑掉。


• 圖組自動載入，因此可提高閱覽速度。


• 樣是皆已經訂作好，即使不懂CSS也沒關係。


• 視窗四角的圓弧為PNG檔，容易更改。


• 自動調整圖片大小以適應視窗。


• 使用最新版 Prototype 1.6。


• 自動輪撥功能。


• 適用於任何瀏覽器。

實際效果請至Lightview官網或筆者工作室網站作品集頁面觀看。

安裝

首先下載 Prototype 1.6.0.2 、Scriptaculous 1.8.1，以及 Lightview 2.2.6 ，將prototype-1.6.0.2.js更名為prototype.js，並將scriptaculous-js-1.8.1.zip src裡的js檔以及prototype.js置於js資料夾底下。

於head之間加入以下程式碼

<link rel="stylesheet" type="text/css" href="css/lightview.css" />

<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/lightview.js'></script>


使用

使用方式與 lightbox 大同小異，比較不一樣的是多了 class='lightview' 的屬性。

非群組狀況

<a href='image.jpg' class='lightview'>My image</a>


群組狀態須在rel後加入群組名稱 rel='gallery[setname]'

<a href='image1.jpg' class='lightview' rel='gallery[myset]'>Image 1</a>

<a href='image2.jpg' class='lightview' rel='gallery[myset]'>Image 2</a>


如要使用說明文字，再加進title屬性即可，

<a href='leopard.jpg' title='A title' class='lightview' >Leopard</a>

<a href='gazelle.jpg' title='This image has a title :: And a caption' class='lightview'>Gazelle</a>


可連結其他頁面，同時自定義視窗大小或加入其他參數

<a href='http://www.google.com' rel='iframe' title='Google :: :: fullscreen: true'

class='lightview' >Google</a>

<a href='http://www.yahoo.com' rel='iframe' title='Yahoo :: A caption :: width: 800, height: 600'

class='lightview' >Yahoo</a>


其它部分請參考 Lightview官網 說明。