人生路漫,与你相伴...

看到一个很cool的图片显示特效，4个js文件和1个css文件让blog中的图片连接在点击时出现电影播放的特效，页面变暗图片慢慢展看...
经过一翻搜索和实做，终于在我的blog上建立OK.

Step 1. 修改 Template

進「Template＼Edit HTML」的畫面。請先備份（點擊 Download Full Template）。找到以下代碼。 ]]></b:skin>
</head> 然後插入以下代碼。<link   href='http://klcintw.css.googlepages.com/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://klcintw.js.googlepages.com/prototype.js' type='text/javascript'></script>
<script src='http://klcintw.js.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'></script>
<script src='http://klcintw.js.googlepages.com/lightbox.js' type='text/javascript'></script>

然後在</body>前面加上以下片段。

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

Step 2. 修改 Post

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

<a href="http://xxx/large.jpg" rel="lightbox">
<img src="http://xxx/small.jpg" /></a>

更多Lightbox的運用（如多圖顯示）請參考「Lightbox JS v2.0」或「swf.com.tw » 使用LightBox展示線上影像」的介紹。

因为网络的关系;效果偶爾會時好時壞，越南这个地方基础建设还有待加强啊！我把相关文件放到了google的协作平台上还是时有时无的，不过google自己的浏览器会执行的情况要比IE好.