沒穿方服

v2.04 Changelog

• NEW - Prototype 版本由 v1.4 升級至 v1.6.0.2。
• NEW - 新增 labelImage 和 labelOf 設定項目，用來改「Image 1 of 4」部分的文字。
• UPDATE - 程式碼大幅改寫。考慮全域命名空間和原生的 javascript 物件。（反正有變聰明就對了）
• FIXED - 展示有 caption（說明文字）的圖片後，再展示無 caption 的圖片，caption 會顯示 "null" 而非沿用之前的文字。
• FIXED - 按下 close 按鈕後位置不會因 focus 的框線而跑掉。

再補幾個：

• 檔案大小由 24 KB 減至 19 KB。
• 現在不會建立 myLightbox 這個物件了，之前有靠這個亂改的也會出狀況。
• 不只滑鼠左鍵，連中鍵、右鍵都會啟動 Lightbox。

使用上跟舊版相容，若之前就按官網的 How to Use 安裝，直接升級也不會有問題。

---

接下來負責的作者要修正之前寫的 以 JavaScript 啟動 Lightbox 2 (更新版) 系列文章。

以 JavaScript 啟動 Lightbox 2（又改版）

先貼上發表文章用的 HTML：

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

之前最大問題是可能在 a 裡面又 insert 一個 a 元素，現在把整段 script 改成：（使用 Lightbox 2.04、Prototype 1.6.0.2）

$$('.postcontent img').each( function(i) {
  var fullSrc = i.src;              // 原圖的位址（預設跟縮圖位址相同）
  if( i.up('a') && i.up('a').href ) // img 外層有 a 的話，其 href 值可能就是原圖位址
  {
    var srcExt = i.up('a').href.split('.').pop().toLowerCase();
    if( srcExt == 'png' || srcExt == 'jpg' || srcExt == 'gif' || srcExt == 'bmp' )
    { fullSrc = i.up('a').href; }
  }
  if( i.up('a') ) {  // 把 Lightbox 需要的屬性/值寫到 a 上
    i.up('a').writeAttribute( { rel: 'lightbox[post]', href: fullSrc, title: i.alt } );
  }
  else {             // 外層沒有 a 就做一個包上去
    i.wrap('a', { rel: 'lightbox[post]', href: fullSrc, title: i.alt });
  }
});
Lightbox.prototype.updateImageList();   // updateImageList 會再次解析圖片，然後把 Lightbox 的功能綁上去

然後我還動了 lightbox.js 幾根寒毛：

1. 只讓左鍵啟動 Lightbox
   檢視原始碼複製列印關於

   1. updateImageList: function() {     
   2.   this.updateImageList = Prototype.emptyFunction;  
   3.   
   4.   document.observe('click', (function(event){  
   5.     if( !Event.isLeftClick(event) ) {return;} // 插入這一行  
   6.     var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');  
   7.     if (target) {  
   8.       event.stop();  
   9.       this.start(target);  
   10.       }  
   11.   }).bind(this));  
   12. },  

   updateImageList: function() {   
     this.updateImageList = Prototype.emptyFunction;
   
     document.observe('click', (function(event){
       if( !Event.isLeftClick(event) ) {return;} // 插入這一行
       var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
       if (target) {
         event.stop();
         this.start(target);
         }
     }).bind(this));
   },

2. 把 Lightbox 內 next, prev, close 鏈結的 href='#' 全拿掉

   因為覺得 url# 出現在狀態列很礙眼，所以在原始碼的 initialize 部分把 Builder.node('a',{id:'nextLink', '#'}) 這類鏈結的 , '#' 統統刪除。
   不過滑鼠移上去的游標變成箭頭了，所以又去 lightbox.css 加上一行 #lightbox a {cursor:pointer;}。

---

測試一下連 Picasa 的圖效果如何

第一張是自己從 Picasa 複製圖片網址，第二張是在 blogger 上傳圖片時自動插入的網址。參考原始碼：

<img alt="複製圖片網址 於 Picasa" src="http://lh3.ggpht.com/bootleq/R2aEsSUz5LI/AAAAAAAAAKE/RPzxhtdHhxE/lightbox2_exh1.jpg" width="200" />
 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYleJpEOzCj907jJ25pYEMODGOoMEO8Ex33Nrl03DvxXWKf3R_Ibfpo7uITtju2hRsk_JQpZENS2auJdiQL9V3D7-o1k-KfheOW5MqHhrd-S_eGpjNrJpLEYOK-r5YZRgIB_ZnpwIr_Cg/s1600-h/sansao.png">
  <img id="BLOGGER_PHOTO_ID_5221300718735749538" alt="山臊行樂圖 - 圖片網址由 blogger 產生" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYleJpEOzCj907jJ25pYEMODGOoMEO8Ex33Nrl03DvxXWKf3R_Ibfpo7uITtju2hRsk_JQpZENS2auJdiQL9V3D7-o1k-KfheOW5MqHhrd-S_eGpjNrJpLEYOK-r5YZRgIB_ZnpwIr_Cg/s320/sansao.png" />
</a>

好樣的，blogger 插的還是不行。換網址重貼。