圖片顯示換裝－－Shadowbox

前文說到Blogger的連結會自動跳到外頁，當然包括圖片的連結。為了讓圖片連結留在原來的頁面，之前安裝了LightBox。

LightBox在各方面表現都不錯，惟獨與各瀏覽器的相容性似乎常有狀況。尤其近來blogger外掛程式不斷更新，LightBox的js不相容的情況更嚴重，使得很多功能我只好放棄。

這回為了加上連結另跳新頁的語法，與Ally討論，Ally提供了數個新的圖片顯示的外掛程式，一一試用後，發現ShadowBox能在各瀏覽器之下正常運作，並且與各式外掛語法不會衝突（至少與Ally的另開新頁語法沒有衝突），最重要的，是它接受我原來LightBox的語法 rel="lightbox" ，不必一張張圖片去更改語法，所以就決定安裝。

安裝步驟：

1. 下載檔案
2. 上傳到自己空間
3. 將這段語法加到</head>前面：

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

完事了嗎？
不，發生奇怪的事！
以上這段語法，無論如何都被顯示為錯誤。尤其<link>這行。我一個字一個字檢查，測試半天，就是找不出原因。

幸好平常有讀書(嘻！嘻！），猜到是Blogger不接受外部CSS的連結(其實也不確定），於是將整段CSS複製到style裡，大功告成 ！

提醒：以上語法需將路徑改為絕對路徑。

※ 2011.09.22

大約一星期以前，blogger官方無緣無故將Lightbox的圖片功能設為內定，雖是善意，卻沒有提供CSS讓使用者可以修改，變成千人一面，毫無特色。且其功能會自動將所有文中的圖片全列入瀏覽列，包括表情符號，結果非但沒有增加美感，反倒令我恨不除之而後快。（以致後來將版面弄亂，sidebar的功能又全部重作－－嗯，因為忘了存檔！）

忍耐了幾天，果然有志者一同，Blogger Plugins的版主立刻提供了刪除該功能的語法 How To Disable the Blogger Lightbox, 當然立刻就把它用上了。（可見不是只有我不喜歡！...)

<script type='text/javascript'>
document.getElementById('Blog1').id = 'Blog222';
var bp_dummy = document.createElement("div");
bp_dummy.id = 'Blog1';
bp_dummy.style.display='none';
document.getElementsByTagName("body")[0].appendChild( bp_dummy );
</script>