[Blogger] 免手動修改圖片連結，讓lightbox也能正常運作的方法

有用lightbox的人，也許會遇到這個問題。

本文的效果為：當網頁載入而未完畢前，點圖片連結會另開新(分)頁來顯示圖片，而javascript載入完成後，lightbox可以正常運作。

原本我以為是Windows Live Writer的問題，當文章內的圖片上傳到blogger後(picasa的相簿內)後，無法讓有使用lightbox的<a>標籤正常使用lightbox來開啟影像(會變成讀取不到圖片)。

當初我自己測試是，把影像連結內的/s1600-h 或是/s800這段文字給刪除掉，lightbox即可正常運作。

但是每次發表完文章，還要上draft.blogger.com去修改文章原始碼，實在耗時費力！當初靈機一動，何不用jQuery直接把href也改成能正常使用的字串呢?

這個東西去年就想弄了，至少拖了有半年以上，之間有讀到Abin一篇相關的文章: Blogger 和 Picasa 的圖片上傳和外連限制，我才知道原來是Google Picasa的做的小詭計，加個"-h"就可避免讓圖片被外連。原來我之前一直錯怪WLW了。

雖然有想法，但是我拖到剛剛才來試寫這個script，沒想到幾分鐘就完成了…

這邊跟大家分享一下我的作法。

函式原始碼:

//用來避免lightbox無法正常連結圖片
//做法是將s1600-h，改為s1600
function ReplaceImageLink()
{
    lightboxLinks = $('a.lightbox');
    for(i=0; i<lightboxLinks.length; i++)
    {
      if (lightboxLinks[i].href.match(/s1600-h/))
        lightboxLinks[i].href = lightboxLinks[i].href.replace(/s1600-h/g, 's1600');
    }
}

因為我的blogger有掛上jQuery，於是我在document.ready裡面，lightbox函式執行之前，加上了ReplaceImageLink()這個函式，內容就變成下面這樣：

<script type='text/javascript'>
$(function(){

//修改符合a.lightbox的href
ReplaceImageLink();

$('.lightbox').lightBox();
});
</script>

這樣就算完成啦。當lightbox執行之前，圖片中有s1600-h的，都會被改成s1600，然後lightbox就可以正常執行。

另外，也可以改成把/s1600-h給整個去掉，一樣是可以正常運作。