2008-07-10: 這方法還是有問題,實在是…… 請參考更新版 升級 Lightbox 至 v2.04

之前寫的方法會造成大圖讀取緩慢(因為都是讀原圖),想想還是縮圖比較有禮貌,所以現在貼圖的 HTML 是 blogger 自動插入的:

  1. <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://原圖.png">  
  2.   <img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://縮圖.png" border="0" alt="" id="BLOGGER_PHOTO_ID_some_id" />  
  3. </a>  

通常會再刪一點:

  1. <a href="http://原圖.png">  
  2.   <img src="http://縮圖.png" alt="替代文字" />  
  3. </a>  

JavaScript 則改為:(使用 Lightbox 2.03.3Prototype 1.6.0

  1. $$('.postcontent img').each( function(i) {  
  2.   var fullSrc = i.src;  // fullSrc : 原圖的位址  
  3.   if( i.up('a') && i.up('a').href )  
  4.   {  
  5.     var srcExt = i.up('a').href.split('.').pop().toLowerCase();  
  6.     if( srcExt == 'png' || srcExt == 'jpg' || srcExt == 'gif' || srcExt == 'bmp' )  
  7.     { fullSrc = i.up('a').href; }  
  8.   }  
  9.   var imageLink = new Element("a", { rel: 'lightbox[post]', href: fullSrc, title: i.alt });  
  10.   i.insert({'before': imageLink});   // 'top' insert 在 ie 會出問題  
  11.   Event.observe( i, 'click'function(event) { myLightbox.start(imageLink); Event.stop(event); });  
  12. });