[Blogger][Addon] 來裝個燈箱吧！Install Fancybox on Blogger

這幾天大概試用了幾套 lightbox like 的燈箱效果，最後我選用的是 fancybox。

除了 fancybox 外，也試了 Shadowbox 及 Colorbox 這兩套，其中，Colorbox 跟 fancybox 蠻相似的，除了比 fancybox 更輕量以外 (不到 9KB)，也有提供五個樣式的 css 範例供你下載套用，但比 fancybox 少了直接展示 swf 的功能，不過還是可以用別的方法展示 Youtube 或 Vimeo 的影片。

Fancybox	Colorbox	Shadowbox
jquery.fancybox-1.3.1.pack.js 14.3KB	jquery.colorbox-min.js 8.59KB	shadowbox.js (全功能支援的版本) 63.5KB

安裝簡介

個人覺得 fancybox 的說明寫得蠻好的，您也可以直接看 fancybox 的官方文件：How to use。

首先，下載 Fancybox 的檔案 (最新版本為 1.3.1)，然後解壓縮後上傳到您的網頁空間中。

再來，在你的 </head> 之前，include 必要的 js 檔案。(記得修改路徑成你所放置 js 的位址)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://you.url/fancybox/jquery.fancybox-1.3.1.pack.js"></script>

接著，加入 css 檔案 (記得修改路徑成你所放置 CSS 的位址)。

<link rel="stylesheet" href="http://you.url/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

OK，來寫一點小程式。

<script>
$(document).ready(function() {
$("a#single_image").fancybox();
});
</script>

最後，怎麼用呢？

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

還有更多的 Options，可以加在程式碼裡，例如特效、燈箱背景顏色及透明度，官方網站以及範例程式都有，您可以自行測試，範例如下：

<script>
$(document).ready(function() { 
$("a#single_image").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'overlayOpacity': 0.9,
'overlayColor' : '#000'
}); 
});
</script>

進階討論：使用 .live() 的情況

如果有使用 NS 的 Blogger hack: AJAX LOADING 動態文章，因為 NS 使用了 .live()  來載入動態頁面，因此當你在動態換頁之後，換頁後的 fancybox 功能會失效，所以也用 .live() 來啟動 fancybox：

<script>
$(document).ready(function()
{
$('a#single_image').live('click', function(){ 
$(this).fancybox(); 
return false;
});
});
</script>

一般的作法就是像 NS 的 Blogger Ajax loading 動態文章一樣，當觸發 click 之後再接續後面的程式，不過實際測試的結果，當使用 click 時，第一次觸發 fancybox 必須點選圖片第二次時才會啟動 fancybox 的特效，因此在 Fancy 有一個討論串即有討論這個問題，目前的解法是，改用 mouseover 即可。

<script>
$(document).ready(function() 
{ 
$('a#single_image').live('mouseover', function(){ 
$(this).fancybox();
return false;     
});
});
</script>

Ref：Issue 18 fancybox could not support in jquery.live()

另外，關於 jQuery Selectors 的語法，也請參考：jQuery API 文件：Selectors

如果有安裝上的問題或有錯誤，歡迎回應討論。

文章分類：Blogger Addon,jQuery