替lifetype的圖片加上效果

作者: 日期: 2007-06-06 05:43

字體大小: 小中大

要讓lifetype的圖片有點效果就要安裝Lightbox JS v2.0這個套件

可以在http://www.huddletogether.com/projects/lightbox2/ 這裡下載

安裝步驟

1.下載Lightbox JS v2.0 裡所提供的檔案

cd /var/www/html/plog
wget http://www.huddletogether.com/projects/lightbox2/lightbox2.02.zip
unzip lightbox2.02.zip
mv lightbox2.02 lightbox2

2.修改 /lightbox2/js/lightbox.js

大約在65行的地方

將

var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

修改為

var fileLoadingImage = "http://www.pmail.idv.tw/plog/lightbox2/images/loading.gif";
var fileBottomNavCloseImage = "http://www.pmail.idv.tw/plog/lightbox2/images/closelabel.gif";

3.修改 /lightbox2/css/lightbox.css

將
#imageData{ padding:0 10px; color: #666;}

修改為

#imageData{ padding:0 10px; color: #666;
font: 11pt Verdana, Helvetica, sans-serif;
}

4.修改 /js/tinymce/tiny_mce-plog-resourcelist.js

如下圖所示，在兩個位置上加上底下的文字

rel="lightbox[roadtrip]" title="'+resourceDesc+'"

5.修改 js/tinymce/tiny_mce-plog.js

在extended_valid_elements裡的 a 加上 rel ，若沒有加上rel，tinyMCE會認為rel不是合法的參數，所以會自動過濾掉了，這樣就看不到lightbox的效果了。

６編輯你的個人模版裡的 header.template

在</title>後面按下鍵盤的「Enter」鍵來空行，再將底下的四段文字貼在<head>之後。
<script type="text/javascript" src="{$url->getUrl("/lightbox2/js/prototype.js")}"></script>
<script type="text/javascript" src="{$url->getUrl("/lightbox2/js/scriptaculous.js?load=effects")}"></script>
<script type="text/javascript" src="{$url->getUrl("/lightbox2/js/lightbox.js")}"></script>
<link rel="stylesheet" href="{$url->getUrl("/lightbox2/css/lightbox.css")}" type="text/css" media="screen" />