[轉載]在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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeBJ0o0pMe11e5JATRc2FM3OMhL6_89RWePYN8Gg46GkW-AFGzrs7iknzGvYND4BfWkAn4IJg33pVTdiuFvLhqvRQ4osrSLcNwG-EVHU421gi5gge0puRxg4vq8CgcUU_aMiA-QcSl-9M/s400/P1000013.JPG" rel="lightbox"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhe0tSHpSfF8XJVsUMtw3gxNzTC7tcjFiVNqFhufGfPN-T45KwhTr-aGNQMZ6_MkYfUQGdaOeKnl5ZzIKlOdUXd5kQiU9OhlVoUWV7fFWUmsicBMhsaDZwr8WRhGij2bd8mJMmEyTyUGs/s400/P1000013.th.jpg" /></a>


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





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

相關文章 :