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

image

image

這幾天大概試用了幾套 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),然後解壓縮後上傳到您的網頁空間中。

image

再來,在你的 </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

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

留言

  1. 你的部落格速度有變快了
    之前進來都會卡很久
    都不好意思跟你說.....

    回覆刪除
  2. 真是對不起, 最近有空特別反覆測試了一些東西, 發現拖慢最多的是文章頁面裡頭的一堆推薦按鈕, 其實 facebook 的東西也會有拖慢的現象, 但至少用 firefox 測試速度上已經可以接受, IE 還是不快就是了, 有什麼問題再麻煩跟我說, 我會努力改進的:D

    回覆刪除
  3. 另外首頁還有比較大的改變是因為裝了 Lazy load, 這樣載入圖片會等你拉下來之後才載入,對於多圖的這裡是提升不少速度,總之最近都得感謝 NS 的 Blog,那裡有好多改進 blog 速度的好東西,正好是我想要的。

    再次推薦:http://blog.nightspirit.tw/

    回覆刪除
  4. 不好意思是不是可以問一下,因為對安裝這類掛件一竅不通…
    我有瀏覽過這類燈箱插件的效果,目前屬意使用Colorbox
    我使用的BPS是Tumblr,應該也可以跟Blogger同樣實現外掛的使用吧?

    我照著教學使用fancybox演示在Tumblr的效果,可是卻失敗了…0___0
    我還不清楚錯誤在哪,不清楚是否還有除了教學以外的步驟沒達成?
    想請教的是,我將你教學的第三段
    加在第一段js載入程式碼之後,這樣作法正確嗎?
    我是這樣操作的…

    望請你的回覆,感謝

    回覆刪除
  5. 古之遺風 您好,

    我試做了一個 Tumblr 的 Custom Page,我想應該是沒問題。
    頁面在:http://jimmyyen.tumblr.com/a

    你可以直接看那一頁的原始碼,就可以了解哪些是基本的配置。

    回覆刪除
  6. 非常感謝你!已經使用成功了喔喔喔喔喔喔!
    接下來我會試著操作使用Colorbox,總之非常感謝你的解答。
    :D

    回覆刪除
  7. 別客氣,祝你順利安裝哦!

    回覆刪除
  8. 不好意思,我是使用WP,安裝這個外掛有幾個問題想請教一下。
    請問加入css檔案的那段語法(<link rel="....,)是指加入到style.css裡嗎?
    及最後2個語法是該加入到那裡?
    請指點一下,我有去作者網站上看,但還是看不懂,所以來這裡請教您,謝謝。

    回覆刪除
  9. Peter 您好,
    WP 控制台,外觀-->主題編輯器
    找到 header.php (頁首),全部加在 </head> 之前就可以。

    回覆刪除
  10. 謝謝您的指點。
    想請教另一個問題是使用Iframe,這項功能使用不出來,不知是不是那裡出錯或少了什麼?
    我的jQuery selector是照Fancybox貼的。Images,Inline可以使用。

    回覆刪除
  11. iframe 的部份我是加了: 'type': 'iframe',你可以看我 Blog 的原始碼,找到 $("a#iframe").fancybox({ 這段。

    回覆刪除
  12. 感恩阿...,終於成功了XD
    我的網址http://taitungtea.com/t2.html
    請問一下google的jquery-1.4.3.min.js和jquery下載的會有差別嗎?

    回覆刪除
  13. 恭喜啊!從 Google 和 jQuery 官方下載都沒差,你只要有空間抓哪一份都 OK,我是都依賴 Google 的空間,主要是網路速度我覺得直接從 Google 引用比較快一點。:-)

    回覆刪除
  14. 你好,我想請問有關文字連結的問題
    照片那邊顯示文字的範例中.. a rel="example_group" href="..." title="顯示文字"> <img alt="." src="" /a ,顯示名稱就是照片變大會有顯示文字.如果我顯示文字要做超聯結...我要怎麼寫,或是放大的照片可以另外再做連結嗎...!?

    謝謝

    回覆刪除
  15. @ohmyfooood
    要利用 titleFormat 去寫,支援 function,官網有範例,但我沒寫過。
    Fancybox -> Tips and Tricks:http://fancybox.net/blog

    回覆刪除
  16. 另外,colorbox 也可以用 title 的 function,你也可以試試看 colorbox
    http://colorpowered.com/colorbox/

    回覆刪除
  17. 謝謝你,
    讓我來試試看@___@ (我不是程式人)
    他這樣的意思就是我得寫css不能用html囉!?

    回覆刪除
  18. Hi ohmyfooood, 是寫在 javascript 裡面

    回覆刪除
  19. 吉米您好,想請問您有關FANCYBOX的問題
    因為我目前在IE瀏覽效果時,關閉的按鈕會無法正常顯示出來
    但在FIREFOX下則為正常顯示
    想詢問您是否知道相關的解決方法
    謝謝您,感謝分享:)

    回覆刪除
  20. Hi COOL 您好:
    就我知道 Fancybox 的 1.3.4 版有針對 IE 6 在 CSS 上有一些設定,或許你可以先更新到 Fancybox 最新版試試看,不過我我現在是改用 Colorbox 了,因為程式更小,搭配其他的 javascript library 像 mootools 好像比較沒有問題,測試結果在 IE 也都正常,也推薦您試用看看。

    回覆刪除
  21. 更新版本之後,關閉的按鈕可以正常顯示了
    不過卻出現了展開之後都會再位移一次圖檔的位子
    似乎是為了讓按鈕跑出來關係
    而firefox卻不會有此問題出現。
    總之,真的非常感謝你如此快速的回答噢:)

    回覆刪除
  22. 請問一下1.3.4版的
    $('span.city').live('click',function(){
    $.fancybox({
    'opacity' : true,
    'transitionIn' : 'elastic',
    'transitionOut' : 'elastic',
    });
    });
    我看1.3.4版有人這樣寫!
    但是這樣寫好像讓transitionIn失去滑鼠的focus無法正常動作
    有什麼更好的辦法嗎?

    回覆刪除
  23. Re: KK <5586663579675901172>
    現在沒用 fancybox 了,但我看您的語法
    'transitionOut' : 'elastic',
    後面的 , 要移除

    回覆刪除
  24. 你好,請問一下,我照著步驟操作,但為什麼都會出現以下錯誤?
    jquery.fancybox-1.3.4.pack.js
    行: 17
    錯誤: 無法取得屬性 'opacity' 的值: 物件為 null 或未經定義

    回覆刪除
  25. 我找到問題了,是我用的jQuery版本不同造成的

    回覆刪除
  26. Re: 餅仔 <8651790501886444899>
    太晚回應您了,抱歉。
    除了 fancybox,建議也可以試試比較輕巧的 colorbox。

    回覆刪除

張貼留言

回應不用錢,請多多益善!懶得寫字按個讚也是相當感謝!

這個網誌中的熱門文章

[古典相機] 巧緻實用的簡單精神.Nikon FE.1978

有點誇張的準專業機.Minolta Alpha 7 (Dynax 7、Maxxum 7).2000

在 Excel 裡轉換 Unixtime 格式

[連動測距相機] Yashica Electro 35 GSN.1973