P's & Love
It's my life68
polaristin
1985/07/23
Taipei, Taiwan
台南人，現於台北唸書，目前為碩二研究生
Lightbox是個很好玩的東西，主要用在網頁的圖片上，以往開圖片都要開新視窗或是看完之後要回到原本的網頁，用了這個之後就可以在同一個視窗看原始照片，而且，使用起來效果很炫，還不清楚的話點下面看看就知道囉。
4/20 update：2.0版已經出了，可以觀看這篇。
8/27 update：由於現在放用Flickr相簿，故不再使用lightbox功能，想知道效果的可直接到Lightbox網站觀看。
以下教學參考Eason's Blog跟haoooo的教學，在此感謝。
首先先去 Lightbox下載下方的五個檔案，將lightbox.css跟lightbox.js放在你所使用的模組資料夾下，以我來說我是放在/lifetype/templates/blog_1/andreas01-2col/底下，另外的三個圖片可以擺在其他地方，不過為了方便起見我在模組資料夾下另外開一個images資料來存放這三張圖片，以下皆以上述的條件作設定，請記得換成自己所設的。
1. 修改header.template，
在<head>跟</head>中間加上 <link rel="stylesheet" href="{$url->getTemplateFile("lightbox.css"
}" type="text/css" media="screen" /> <script src="{$url->getTemplateFile("lightbox.js"}" type="text/javascript"> </script>
2. 修改lightbox.js，這裡我填了絕對路徑才成功，我不曉得相對路徑是否可以.
var loadingImage = ‘loading.gif’; ↓ var loadingImage = ‘http://圖片所在資料夾/loading.gif’; var closebutton = ‘close.gif’; ↓ var closebutton = ‘http://圖片所在資料夾/close.gif’;
3. 最後修改lightbox.css
overlay{ background-image: url(”overlay.png” } ↓ overlay{ background-image: url(”images/overlay.png” }
filter: progid
XImageTransform.Microsoft.AlphaImageLoader (src=”overlay.png”, sizingMethod=”scale” ↓ filter: progidXImageTransform.Microsoft.AlphaImageLoader (src=”images/overlay.png”, sizingMethod=”scale”
使用的方法很簡單，請參考下方
<a title="想顯示的標題" rel="lightbox" href="圖片位址">
祝大家順利成功，也希望LifeType能做出plugin囉。
Related posts:
No Responses so far | Have Your Say!
Leave a Feedback
Bad Behavior has blocked 116 access attempts in the last 7 days.
Said 104food美食王 on 2010-07-14 13:23:18
Said polaristin on 2010-05-02 22:11:22
Said lulalala on 2010-05-01 11:57:46
Said ann on 2010-04-26 22:21:34
Said flyH on 2010-02-20 09:36:22
Said 3D 骨刺 on 2010-02-20 08:43:41