裝上 Lightbox Plus

說順手好像也沒這麼順，沒辦法，MT 沒有這麼多方便的 Plugin，不能隨時隨地就插進去。

所以還是自己動手 DIY 吧！


看了 LightBox, LightBox2 and LightBox Plus 這篇後，決定這次也跟進改用 Lightbox Plus，網頁上寫 based on original Lightbox，但是檔案 size 小很多？

不管，黑貓白貓，能捉老鼠的就是好貓。

下載解壓縮之後有個 resource 資料夾，丟到隨便喜歡的地方去，我自己這邊是放在 /lightboxplus 下。然後修改 lightbox_plus.js 裡最下方的檔案路徑：
Event.register(window,"load",function() { var lightbox = new LightBox( { loadingimg:'http://thecrap.org/lightboxplus/loading.gif', expandimg:'http://thecrap.org/lightboxplus/expand.gif', shrinkimg:'http://thecrap.org/lightboxplus/shrink.gif', previmg:'http://thecrap.org/lightboxplus/prev.gif', nextimg:'http://thecrap.org/lightboxplus/next.gif', effectimg:'http://thecrap.org/lightboxplus/zzoop.gif', effectpos:{x:-40,y:-20}, effectclass:'effectable', closeimg:'http://thecrap.org/lightboxplus/close.gif', resizable:true } ); } );
接著去編輯 MT 的模版，把下面這幾行加進去：
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>lightboxplus/lightbox.css" media="screen,tv" /> <script type="text/javascript" src="<$MTBlogURL$>lightboxplus/spica.js"></script> <script type="text/javascript" src="<$MTBlogURL$>lightboxplus/lightbox_plus.js"></script> 注意，兩個 js 檔的順序不要更動，不然會爛掉。


最後在每個要套用 Lightbox 的圖片上加上 rel="lightbox"：
<a rel="lightbox" href="http://thecrap.org/foo.jpg"><img src="http://thecrap.org/foo.jpg"></a>
就可以有像下面這樣的效果的啦！（點小圖看大圖）




如果不想每次要加圖片就得手動加上 rel="lightbox" 的話，也有解。我自己是利用 Mootools 提供的 JavaScript Framework 其中的功能來達成。由於 Mootools 是模組化的，下載的時候可以只選擇需要用到的部份，所以請選擇 Window.DomReady 就好。一樣丟上伺服器，並在模版中加入相對應的 code。

接著把下面這段也加進去，就大功告成啦：
function autoLightbox() { var anchors = document.getElementsByTagName("a"); var imgex = /\.(jpg|jpeg|gif|png|bmp)$/i; for (var i = 0; i < anchors.length; i++) { var anchor = anchors[i]; if (anchor.getProperty('href') && (anchor.getProperty('href').search(imgex) >= 0)) { anchor.setProperty('rel', 'lightbox'); } } } window.addEvent('domready', autoLightbox)

參考資料：

在MT上使用Lightbox JS
Auto detect image link for lightbox | pootato.org