在Blog顯示圖片的工具 – jQuery.Lightbox

以前在逛網頁的時候，有印象看過這類的顯示方式，昨天心血來潮，查到了這個工具的名稱: Lightbox，並且下載來套用在自己的blog，讓它可以更痴肥一點。

這邊我前後試了兩種Lightbox:

1. 一種是原始的Lightbox，目前到第2版。
2. 一種是使用jQuery實作的Lightbox，目前到0.5版。

原先我是先裝了第一種，全都設定好之後發現好像無法work，看一下原始碼跟開了jash來debug才發現，跟我原本已經掛上的jQuery好像有衝突，它的prototype.js用到了$這個名稱。

於是我又上網找，就發現了第二種這個jQuery-lightbox，而這個版本所需script檔更少更小(第一種版本光script檔就要5個，加一加是200kb；而第二種版本只要一個script檔，而且只要10kb，當然前提是要先掛好jQuery)。

下載點

jQuery Lightbox最新版

安裝方法

將壓縮檔內的相關檔案(jquery.lightbox.min.js, images, css)都上傳到你自己的網頁空間(如Google Pages)後，在你的blog的html範本檔中header內加入:

<script type="text/javascript" src="jquery.js"></script>
<script type=”text/javascript” src=”lightbox.js”></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

上面檔案的位置請改為對應存放的網址。

然後，在你的script最後加上:

//for jQuery.lightbox 
$(function() {
    $(".lightbox").lightbox({fitToScreen: true});
});

使用方法

單張圖片: 在a 標籤裡加上 class="lightbox"，如 :

<a ref="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbAwMcucNkiTyHapMS30WA2TKaz3kDjMYQxP1MS7Pk6o9JblFRHGJIWbs5LShPgEp4Ck1xZNSU2u5kDG6YR2YfgbQgTY2KsPHRZYj4QX5Ggcz7sYbnGs-AnK8CLontU8h_HW0H_7ugnqxD/s800/20080803234.jpg">My Photo</a>

範例: My Photo

一組圖片: 除了class="lightbox"外，在要顯示的a 標籤裡加上rel="groupname" ，groupname為這組要顯示的圖片組名。注意! 是rel 不是ref 哦…(謎之聲:誰會跟你一樣笨啊!!…囧rz)

<a href="photo1.jpg" class="lightbox" rel="2008112701"><img src="photo1.jpg"/></a> 
<a href="photo2.jpg" class="lightbox" rel="2008112701"><img src="photo2.jpg"/></a> 
<a href="photo3.jpg" class="lightbox" rel="2008112701"><img src="photo3.jpg"/></a>

範例: | |

另外可以用title這個屬性來決定相片的標題。