在Blogger Beta使用Lightbox顯示圖片

Lightbox是一種滿炫的效果，點擊網頁上的圖片或連結後，背景彷彿電影要開演前一樣變暗，然後顯示Loading的訊息，接著就顯示出內容（圖片或網頁）。檢視實際效果請點下圖。

目前blog上使用的Lightbox套件很多，這裡所選用的是「Lightbox JS v2.0 by Lokesh Dhakar」並加以修改部份圖片的網址。

為了讓大家能夠快速的使用，我已經做好修改並於在「Google Page」上，只要依照以下步驟您就可以立即擁有Lightbox的效果！

Step 1. 修改 Template

進「Template＼Edit HTML」的畫面。請先備份（點擊 Download Full Template）。找到以下代碼。

]]>   

然後插入以下代碼，詳細情形請點這裡觀看。

<link href='http://klcintw.css.googlepages.com/lightbox.css' media='screen' rel='stylesheet' type='text/css'/><br /> <script src='http://klcintw.js.googlepages.com/prototype.js' type='text/javascript'></script><br /> <script src='http://klcintw.js.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'></script><br /> <script src='http://klcintw.js.googlepages.com/lightbox.js' type='text/javascript'></script>

Step 2. 修改 Post

在要套用Lightbox效果的圖片或連結加上「rel="lightbox"」並將href指向要顯示的內容url。如上面的範例中，小圖的url是http://img228.imageshack.us/img228/6883/104357ao3.th.jpg，而大圖的url是href="http://img228.imageshack.us/img228/6883/104357ao3.jpg，完整的HTML代碼如下：

<a href="http://img228.imageshack.us/img228/6883/104357ao3.jpg" rel="lightbox"><img src="http://img228.imageshack.us/img228/6883/104357ao3.th.jpg" /></a>
更多Lightbox的運用（如多圖顯示）請參考「Lightbox JS v2.0」或「swf.com.tw » 使用LightBox展示線上影像」的介紹。

更正 teaegg 提出的問題：發現一個bug，用首頁最下面「較舊的文章」裡頭所看到之前文章的圖片，Lightbox的效果會出不來。請問有沒有解決方法？

修改範本

在前面加上以下片段。

<script> var WidgetManager_HandleControllerResult = _WidgetManager._HandleControllerResult; _WidgetManager._HandleControllerResult = function() { try { WidgetManager_HandleControllerResult.apply(this, arguments); initLightbox(); } catch(e) {} } </script>