阿駕零零壹 © 學習筆記

Lightbox

之前就看到有人在 Lifetype 的中文論壇問這個東西，不過都一直沒有空玩。

最近有人已經把他弄出來了，哈，感謝。紀錄一下。

參考這幾個地方：Lightbox、P's Lifetype、華龍國小Lifetype學習網。

首先，先看一下甚麼是 Lightbox，點下方圖片看效果：

是的，是不是很炫?! 下面就來紀錄一下怎麼弄的。

1. 點這裡下載我改過的版本。

2. 在 Lifetype 目錄下解壓縮這個壓縮檔，也就是五個檔案放在 /Lifetype-Root/lightbox/ 下面。

3. 將 lightbox.js 及 lightbox.css 內的路經修改成你的站台的路徑。

4. 由於要顯示出效果，圖片連結需要加上 rel="lightbox"，如果願意每次都用 HTML 模式改就慢慢改吧。

5. 如果懶得每次都改。以 TinyMCE 為例，可以修改 /js/tinymce/jscripts/tiny_mce/tiny_mce-plog-resourcelist.js 這個檔案。

找到第22行左右，加上紅色粗體字部份：

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
        if( preview == 1 ) {
            htmlCode = '<a rel="lightbox" id="res_' + resId+ '" xhref="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'" type="'+mimeType+'">';
            htmlCode += '<img style="margin: 5px;" border="0" alt="'+resourceDesc+'" xsrc="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'&mode=preview" />';
            htmlCode += '</a>';
        }
        else if ( preview == 2 ) {
            htmlCode = '<a rel="lightbox" id="res_' + resId+ '" xhref="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'" type="'+mimeType+'">';
            htmlCode += '<img style="margin: 5px;" border="0" alt="'+resourceDesc+'" xsrc="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'&mode=medium" />';
            htmlCode += '</a>';
        }

如此一來，加上圖片的時候，就會自動加上 rel="lightbox" 的語法了。

6. 接著修改 /js/tinymce/jscripts/tiny_mce/tiny_mce-plog.js 這個檔案。

找到19行左右，加上紅色粗體字部份：

extended_valid_elements : "a[class|name|href|target|title|onclick|rel]

7. 最後，只要各自在模板的 header.template 檔案內 <head> 和 </head> 中間找個地方放入語法即可：

<link rel="stylesheet" xhref="{$url->getUrl("/lightbox/lightbox.css")}" type="text/css" media="screen" />
<script xsrc="{$url->getUrl("/lightbox/lightbox.js")}" type="text/javascript"></script>

8. 在插入圖片的時候，請選擇中或小的預覽圖。這樣點下去就會有 lightbox 的效果。

本站的使用者，~~只需要將上面第7點語法放入模板中即可~~ 直接插入預覽小圖即可，我已經把相對應的修改弄好了。