沒穿方服

Lokesh Dhakar 製作的 Lightbox 2 看圖特效，官方用法是以一個 rel 值為 lightbox 的 a 標籤把圖片包起來，像這樣：

<a href="foo.png" rel="lightbox"><img src="foo.png" alt="foo" /></a>

但是我懶得在每張圖上加連結，想改成 <img src="foo.png" alt="foo" />（跟平時貼圖一樣），而 Lightbox 會把我網頁上全部文章內文的全部圖片當成一組，並且用每張圖的 alt 當標題來展示。

程式碼如下：（用的是 Lightbox 2.03.3、Prototype 1.6.0）

$$('.postcontent img').each( function(i) {
  var imageLink = new Element("a", { rel: 'lightbox[post]', href: i.src, title: i.alt });
  i.insert('before':imageLink});   // 'before' 若改為 'top' 在 ie 會出錯
  Event.observe( i, 'click', function() {
    myLightbox.start(imageLink);
  });
});

說明一下 postcontent 是我範本的「文章內文」部份，對其中所有圖片製作相應的連結（anchor）元素，然後在圖片被點的時候呼叫 myLightbox.start。

myLightbox 是 lightbox.js 在頁面載入完成的時候建立的（不是我建立的），啟動整個特效的是 start 方法，你可以自己丟 anchor 給他，不過仍需要 href 和 rel 屬性與值；另外 lightbox 展示圖片組的時候會比對頁面上所有的 anchor，所以你建立的 anchor 也要記得加到 DOM 上才行…… 還真是難用啊。

附上測試用小圖：