當 CommunityServer 遇上 LightBox (上)

Monday, 1 February 2010 08:51 by admin

LightBox 已經在許多官方網站採用,或許大家對他並不陌生,這是一套 JavaScript 的程式,也就是他可以套用在各作業平台上

要取得這套,先到 Lightbox 官方網站下載取得

安裝步驟很簡單

1. 上傳檔案

2. 在網頁上加入 Javascript

<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>

3. 同網頁加入 CSS link

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

4. 建議修改 lightbox.js 裡面的圖片連結,以免因為路徑的關係無法出來

fileLoadingImage:        '/lightbox/images/loading.gif',
    fileBottomNavCloseImage: '/lightbox/images/closelabel.gif',

以上完成後就可以開始使用 Lightbox 了,要在圖片上啟動,只要在 a 裡面加入 rel="lightbox" 就會有此效果,如

<a href="大圖片網址" rel="lightbox" title="圖片標題"><img src="小圖片網址" /></a>

 

使用 LightBox 最大的好處於,不論 LightBox Javascript 是否有正確運作(如轉載到其他網站或 RSS ),都不會因此而造成圖片無法顯示

下一集在介紹如何整合到 CommunityServer 上

Pingbacks and trackbacks (1)+