2008年11月27日 星期四

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

2008-09-25_125706

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

這邊我前後試了兩種Lightbox:

  1. 一種是原始的,目前到第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="http://lh4.ggpht.com/_K5qAbjq2xng/SJnKnk_0PnI/AAAAAAAAAi8/tuMeoYC8ElA/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這個屬性來決定相片的標題。

4 則留言:

  1. 我發現了這玩意的bug了…orz

    回覆刪除
  2. Google Pages 關了~~那js要放到哪?

    回覆刪除
  3. 聽你這麼一說,我剛剛用無痕頁面去看googlepages,發現...
    Google Page Creator is no longer accepting new sign-ups.

    哈哈,這樣就囧了。
    那只好看看自己用的isp有沒有提供一些平台可以給你放這些小東西,像hinet就有,seednet應該也會有吧。

    回覆刪除
  4. 旅人,你上面的程式有些小BUG。
    1. 錯: $(".lightbox").lightbox({fitToScreen: true});
    -> 改: $(".lightbox").lightBox({fitToScreen: true});
    -----------------------------------------------
    2. 錯: ref="lightbox" My Photo
    -> 改: class="lightbox" My Photo

    回覆刪除