參考文章
http://plog.hlps.tcc.edu.tw/plog/post/2/692
華龍國小LifeType學習網 | Lightbox JS v2.0
最新版的 Lightbox JS v2.0可以同時顯示多張的圖片。
要加上這樣的功能要進行如下的修改 ！
首先下載所需的檔案後，解壓縮到 LifeType 的安裝目錄下。
接著要修改幾個檔案
1. 修改 lightbox 安裝資料夾內的 /js/lightbox.js
將圖片的位置由相對路徑改成絕對路徑。 (參考修改)
var fileLoadingImage = "http://www.tiec.tp.edu.tw/lifetype/lightbox2/images/loading.gif";
var fileBottomNavCloseImage = "http://www.tiec.tp.edu.tw/lifetype/lightbox2/images/closelabel.gif";
2.修改 lightbox 安裝資料夾內的 /css/lightbox.css 讓顯示字型變大
#imageData{
padding:0 10px;
font: 11pt Verdana, Helvetica, sans-serif;
}
3.由於本部落格的編輯器是使用 htmlarea，所以是修改 js 資料夾內的 htmlarea 中的 htmlarea-plog-resourcelist.js
加入紅字的部份！
function _generateResourceLink( dest, blogId, type, resourceName, resourceDesc, preview, mimeType, resId )
{
var htmlCode = '';
if( type == 1 ) {
// if the resource is an image, check the second parameter to see wether we'd like
// to show the preview with a link to the real size image or the real image
// inlined with the text
//jay add light box
if( preview == 1 ) {
htmlCode = '<a class="nodecoration" rel="lightbox[roadtrip]" title="'+resourceDesc+'" id="res_' + resId+ '" href="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'" type="'+mimeType+'">';
htmlCode += '<img class="res_image_small" style="margin: 5px;" border="0" alt="'+resourceDesc+'" src="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'&mode=preview" />';
htmlCode += '</a>';
}
else if ( preview == 2 ) {
htmlCode = '<a class="nodecoration" rel="lightbox[roadtrip]" title="'+resourceDesc+'" id="res_' + resId+ '" href="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'" type="'+mimeType+'">';
htmlCode += '<img class="res_image_medium" style="margin: 5px;" border="0" alt="'+resourceDesc+'" src="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'&mode=medium" />';
htmlCode += '</a>';
}
如果只要顯示一張圖就只要加入
rel="lightbox" title="'+resourceDesc+'"
2.02版的Lightbox JS提供了群組展示的功能，只要使用圖片將之設成群組，就可以方便的看多張圖片，在看圖的時候，可以將滑鼠移到圖片的左半部或右半部，就會自動顯示上一張、下一張的提示，可點下面的圖片體驗看看。
【設定群組的方法】將連結上rel="lightbox"改成rel="lightbox[自定名稱]"，群組名稱要用中括號包起來。
範例：將三張圖片設定為「jay」的群組
<a href="圖片1.jpg" rel="lightbox[jay]">圖片 #1</a>
<a href="圖片2.jpg" rel="lightbox[jay]">圖片 #2</a>
<a href="圖片3.jpg" rel="lightbox[jay]">圖片 #3</a>
(這部份參考 http://blog.yam.com/jinnsblog/archives/1368531.html )
一般使用者只需要在 header.template 中加入如下的程式碼就可以在插入預覽小圖或中圖時加上 LightBox 的效果
1.「登入管理介面」/「個人網誌設定 」/「網誌模版編輯器」
2.編輯你的個人模版裡的 header.template 這個檔案
3.在</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" />
這樣就大功告成啦！
