2008年7月31日 星期四

[轉載]在Blogger Beta使用Lightbox顯示圖片

[原創連結位址]在Blogger Beta使用Lightbox顯示圖片
1.在版面配置 / 修改HTML /展開小裝置範本下,將



改成




程式碼如下:

<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>


2.再將



改成



程式碼如下:


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


發佈方式為

<a href="http://3.bp.blogspot.com/_EwpJONt0Jk0/SJFxAO875cI/AAAAAAAAB4U/OncfXKtW73s/s400/P1000013.JPG" rel="lightbox"><img src="http://3.bp.blogspot.com/_EwpJONt0Jk0/SJFxABV_atI/AAAAAAAAB4c/5mhGYtKkAZ8/s400/P1000013.th.jpg" /></a>


結果如下圖(參考網址):





效果很炫,但是一次要傳大圖與小圖各1張,會讓相片空間成長加速!

相關文章 :

沒有留言:

張貼留言