2014年8月15日

Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (1)安裝教學

A+
2016.4.13 公告:為了避免上傳檔案、尋找免費空間的麻煩,最簡單的安裝方式請直接參考這篇「Fancybox 燈箱外掛 CDN 安裝懶人包」。


圖片為主的網站若使用燈箱效果,當特效執行時,相信能給予讀者很有質感的加分印象。而這次介紹的 fancybox 燈箱外掛,除了有優雅的展示畫面,更令人驚豔的是,就算不使用圖片的燈箱效果,只要發揮創意,Fancybox 還能做各種應用,例如文字幻燈片、影片彈出、以及這篇 +Mark X 介紹的「文字提示視窗」。而會寫 js、jquery 的話,fancybox 也有 API 能實現各種想像力。

不過讀者請記住一個原則,功能越強、設定越多的的工具,就越不容易學習、操作與上手;功能越簡單、越單一的工具,就越容易安裝,不過也沒什麼項目能設定。

而 fancybox 則是屬於,不但設定不容易,連基本安裝都可能碰壁的一套工具。看了一些網路教學,發現要實現基礎的功能都很有難度,不過要歸咎起來的話,算是官方的問題比較大。而本文的教學說明,相信至少讓讀者能正確安裝,並了解如何套用官方說明書。




一、前言


前言不是已經一大串了嗎,怎麼還有前言?在開始之前,要先了解的概念真的非常多,所以請耐心看下去。

1. 官方說明

首先,必須說「官方說明」做得很差、不利閱讀,且所有主要訊息擠在一個狹長頁面。依照官方的安裝方式,只適合自行架站、有主機的網站,對於一般部落格平台完全不適用,所有的預設小圖示都將無法顯示。

或許從另一個角度看,fancybox 的目標不擺在部落格平台吧!他的客群可能只想針對自架站,這樣才比較有獲利來源(下一點說明)。


2. 非商業網站限定

這個外掛允許個人、非商業網站使用,因此商業網站請參考這個「使用價格」頁面,有提供單一、及不限網站使用的價格選項。


3. 系列文

會找到這個外掛,主要是想取代 Blogger 的官方燈箱效果,從而發現 fancybox 可以模擬的很好。這個系列文目前預定至少有三篇,第一篇只適合喜歡自訂功能、喜歡折騰的讀者。

而第二篇,會提供模擬 Blogger 燈箱效果的 fancybox 懶人包。如果有相同需求的讀者,或許可以等下一篇(這一篇你可能看不下去)。



二、部落格安裝 fancybox 的方法


前面提到,按照官方說明來安裝 fancybox 的話,因為那些 CSS 安裝檔,裡面附了許多預設圖檔的連結,而那些圖檔,得一併上傳到自己的主機。但一般非自行架站的部落格,哪來的主機呢?所以 CSS 內的圖檔路徑當然都讀不到圖了。




請參照以上官網 →「Instructions」,這裡是安裝的程式碼,不過先別複製,因為這些路徑都是不存在的,請依照以下步驟──


1. 下載檔案

從官網頁面往下移動,會看到「License / Download」→ 按下「Download v2.1.5」,可下載所有需要的原始檔。

接著解壓縮成一個資料夾「fancyapps-fancyBox-18d1712」→ 裡面有很多檔案,不過重要的是 Lib、Source 這兩個資料夾 → 將 Lib 資料夾中的 jquery.mousewheel-?.?.?.pack.js 這個檔案,移動到 Source 資料夾裡面。

最後進入 Source 資料夾,將 Helpers 資料夾裡面的所有檔案,移動到 Source 資料夾,這樣所有的檔案就都集中在一起了,如下圖──




2. 上傳檔案方式 1

有兩種上傳檔案的方式,第一個方式比較麻煩,但也許比較好也說不定。

先將 Source 資料夾所有圖檔上傳到自己的圖床空間,然後逐一檢視 Source 資料夾所有的 CSS 檔,檢查有外連圖檔的敘述,將那些圖檔的連結,改成自己的圖床連結,這樣才能讀得到這些圖。

最後將所有的 js、CSS 檔上傳到自己的網路空間即可。怕麻煩的讀者,可採用第二種方式──Google Drive。


3. 上傳檔案方式 2

2016.4.13 更新:由於「Google Drive 關閉外連」功能,建議參考「徹底解決網站外連空間問題」→「支援目錄路徑的雲端空間」,將所有檔案放到這一類的雲端空間。


將 Source 資料夾所有檔案(包含圖檔)上傳到 Google Drive,請參考「外連 js 檔──Google Drive」→「三、Google Drive 的操作」。

當所有的檔案都放在 Google Drive 的同一個資料夾、並確定是公開分享的狀態,那些圖檔不必特別設定路徑,就能被 CSS 檔讀取到(因為放在同一個資料夾),因此這是比較方便的操作方式。


4. 取得外連路徑

安裝程式碼之前,要取得剛剛上傳的那些 js、CSS 檔路徑,如果是 Google Drive,前面的教學文章連結,已經有說明取得檔案路徑的方法,請把這些外連路徑紀錄起來。



三、安裝程式碼


做了這麼多動作,終於可以開始安裝程式碼,回到官方網頁 →「Instructions」,逐一說明如下,這部份的所有程式碼請放在範本中 </head> 之前:

1. Jquery

先檢查是否範本中已經有安裝 jquery、且版本在 1.8 以上。如果否的話,請增加以下這一行

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

2. 滑鼠滾輪外掛

這一項為非必要安裝,不過 WFU 建議安裝,因為提供讀者便利的操作方式,以下請填入對應的檔案外連路徑:

<script type="text/javascript" src="填入jquery.mousewheel-?.?.?.pack.js路徑"></script>


3. 主程式碼

主程式碼必須安裝,以下請填入對應的檔案外連路徑:

<link rel="stylesheet" href="填入jquery.fancybox.css?v=2.1.5路徑" type="text/css" media="screen" />
<script type="text/javascript" src="填入jquery.fancybox.pack.js?v=2.1.5路徑"></script>


4. 輔助功能程式碼

這部份為非必要安裝,請依自己需求安裝。檔案中的字串分別代表:
  • "button":按鈕
  • "media":多媒體
  • "thumbs":縮圖

以下請填入對應的檔案外連路徑:

<link rel="stylesheet" href="填入jquery.fancybox-buttons.css?v=1.0.5路徑" type="text/css" media="screen" />
<script type="text/javascript" src="填入jquery.fancybox-buttons.js?v=1.0.5路徑"></script>
<script type="text/javascript" src="填入jquery.fancybox-media.js?v=1.0.6路徑"></script>

<link rel="stylesheet" href="填入jquery.fancybox-thumbs.css?v=1.0.7路徑" type="text/css" media="screen" />
<script type="text/javascript" src="填入jquery.fancybox-thumbs.js?v=1.0.7路徑"></script>




四、簡易使用說明


1. 官方操作說明

根據官方的說明,要使用 fancybox 效果,操作方法其實滿繁複的,首先,想出現燈箱特效的圖片,得手動加入以下 html 語法:

<a class="fancybox" rel="group" href="大圖網址1.jpg"><img src="小圖網址1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="大圖網址2.jpg"><img src="小圖網址2.jpg" alt="" /></a>


然後在範本中 </body> 字串的前一行,插入以下程式碼:

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>



2. 前導程式

當部落格有數十篇、數百篇文章,根本不可能一一叫出來,把圖片 html 碼改成這個格式來展示燈箱效果,這可是一個巨大的工程。

為了解決這個問題,WFU 寫了一個前導程式,可不必修改 html 碼,請放在範本中 </body> 前一行即可:



請根據以上程式碼行號修改──

E:紅色字串 .post-body 是 Blogger 平台的文章區塊,如果非 Blogger 平台,建議利用「Chrome 開發人員工具」找出文章區塊的 class 或 id,然後置換此字串(class 的前面要加 ".",而 id 前面要加 "#")。

M、P:這兩行的藍色字串 "fancybox" 可自訂,不過這兩處字串必須一致。

P:綠色字串也可自訂。


稍微說明一下這個方便的前導程式,做了哪些事情:

  • 只抓出文章區塊的圖片來展示燈箱效果,自動加上 fancybox 需要的參數,不需要手動設定
  • facnybox 預設有超連結的圖片,才能展示燈箱效果,但網頁有的圖片可能當初忘了設定超連結,那麼這個前導程式可以自動補上超連結

使用以上簡便的前導程式後,就可馬上先測試一下 fancybox 的效果。如果都按照本文步驟進行,安裝全部的套件,那麼沒使用任何進階設定、最陽春的效果也能跟這個 DEMO 頁面一樣優雅:




五、小結


fancybox 的安裝並不省事,否則也不需要特地寫一篇文章了。有的讀者可能覺得麻煩,而產生這樣的想法:打開 DEMO 頁面、或本站的原始碼,直接找 js、css 的連結複製到自己的網站使用,只要幾秒鐘就完成了。

這樣的作法,短時間是見效的,不過 WFU 可以直接公佈結果,請參考這篇「Google Drive(js檔)流量限速,建議自行分流」。等某天檔案失效了,還是得回來看這篇,乖乖自行上傳所有檔案。

另外,如果想要更豐富的特效、縮圖等等,還需要加入更多的 js 語法參數,這部份將有待其餘系列文的補充說明。


Fancybox 系列文章:

21 則留言:

  1. 你真好心機啊! 這麼詳文紒紹!
    早前在 blogger 設定裏有燈箱效果, 但沒去硑究啊!

    回覆刪除
  2. 沒說有滾輪效果還真的沒發現 XD

    回覆刪除
  3. <5089810219448555379>(以上內容請勿刪除,從括號之後開始留言)@雅姬蘭, 因為我的網站用了 lazy load,會跟 blogger 的燈箱衝突, 只好另外找替代品了~

    @Bruce, 原始效果使用滾輪時,畫面會被帶動搖晃,所以下一篇會說明如何使用參數固定畫面。

    回覆刪除
  4. Fancybox 安裝在 Blogger 還真有點麻煩,文章中 html 的運用也需要編寫甚多。Drive 可以同目錄抓相對路徑啊?讓我對它印象又加分了!

    回覆刪除
  5. <1057587230720492675>(以上內容請勿刪除,從括號之後開始留言)是啊,非常麻煩的外掛,所以寫了一個程式來解決 html 的問題。

    還好發現 Google Drive 可以不用改路徑,不然上傳圖檔、改路徑真的會手抽筋...XD

    回覆刪除
  6. blogger 還好一點,fancybox 似乎有 bug
    個人經驗是用舊版 IE 看時,會連線到一些不存在的網址
    如 www.wfublog.com/2014/08/fancybox-lightbox-installation/fancy_shadow_se.png

    如果是自架 wordpress 就會加重伺服器的負擔 (如果人流很多的話)

    回覆刪除
  7. <129104371229928764>(以上內容請勿刪除,從括號之後開始留言)謝謝提供資訊~舊版 IE 啊...以前我每個程式還會去測舊 IE 的效果,現在都懶得管了,讓他早早淘汰吧...XD

    看來 WP 要考慮的東西真不少,連裝個外掛也要斤斤計較伺服器的負擔,真是不同的世界!

    回覆刪除
  8. 所以我也可以改裝這個並且拿掉原本的lightbox自訂搜尋然後就可以裝lazyloard了嗎?

    回覆刪除
  9. <8409989171274374036>(以上內容請勿刪除,從括號之後開始留言)lazy load + fancybox 要相容,是超乎想像的困難,所以先等等吧,第三篇才會寫到。

    不過這兩個比起來,lazy load 的重要性大於 fancybox,網頁速度會比特效重要的 → 建議你先裝 lazyload,關閉官方燈箱,然後縮減圖片體積。

    回覆刪除
  10. <5491683785521693177>(以上內容請勿刪除,以下引言請自行刪減) [quote]謝謝提供資訊~舊版IE啊...以前我每個程式還會去測舊IE的效果,現在都懶得管了,讓他早早淘汰吧...XD看來WP要考慮的東西真不少,連裝個外掛也要斤斤計較伺服器的負擔,真是不同的世界![/quote]

    不,實際上並不需要斤斤計較
    只是之前用平價無限 plan 但有大量流量湧入
    而我又因為設定不周,沒有將 404 error 交回 server 處理,所以才成為了壓倒駱駝的最後一根草

    回覆刪除
  11. <8263179717660536821>(以上內容請勿刪除,從括號之後開始留言)原來如此,自行架站真的要跟老闆會的事一樣多~

    回覆刪除
  12. <1897373795355745608>(以上內容請勿刪除,從括號之後開始留言)

    多一點,但並不是很多
    一般人 (如我) 連流量用多少都不需要理會
    只是突然有一篇文極受歡迎廣傳才這樣

    回覆刪除
  13. <7924511836807548447>(以上內容請勿刪除,從括號之後開始留言) 恩 我會優先以lazyloard為主要改善進度,另外圖片檔案縮小已經在新文章裡面開始著手了,舊文章.....就讓lazyloard幫忙減輕負擔吧QQ

    回覆刪除
  14. <853485005570807747>(以上內容請勿刪除,從括號之後開始留言)舊文章短時間可以靠 lazyload 擋著,不過為了長遠著想,如果有時間的話,還是分批縮小吧!雖然是大工程,不過從另一個角度看,文章還沒很多時就知道這件事,也算小確幸..XD

    回覆刪除
  15. <5854462656911820185>(以上內容請勿刪除,從括號之後開始留言)真的是小確幸,要感謝馬克提醒以及wayne寫了這個lazyloard! 要是再晚各一年發現我恐怕會哭倒。

    回覆刪除
  16. 如果傳大圖,小圖用語法去控制就不用傳兩張了?

    HTML img 標籤的 height 和 width 屬性
    "使用百分比值

    使用 width 屬性的最後一個技巧是使用百分比值來代替像素的絕對值。這將使瀏覽器按照與瀏覽器顯示窗口的一定比例來縮放圖像。因此,如果要創建一個寬度與顯示窗口寬度相同,高度為 30 個像素的彩色橫條,可以這樣實現:

    < img src="/i/ct_1px.gif" width="60%" height="30px" / >"
    http://www.w3school.com.cn/tags/att_img_height-width.asp

    回覆刪除
  17. <5432624175581473516>(以上內容請勿刪除,從括號之後開始留言)官方的操作方式很繁複,需要很多手動操作的流程,時間久了就不會有動力去作這件事。

    如果每張圖片手動改寬度、高度參數的方案,Hepha 能接受這樣的操作流程,自然是沒問題。或許你可以想辦法寫 code 把這個流程自動化、批次化。

    回覆刪除
  18. 利用文章範本阿0●0語法我都是亂抄底子很差><

    http://i.imgur.com/N3l1LU1.png

    我沒裝這個啦,一來很懶,二來早上想到一點,如果用了之後每章圖都會有兩張(一大一小)圖片的語法在文章中,那麼你沒用這個之後,文章會不會一大一小兩張同時顯示?



    回覆多了一行,這是蝦米防垃圾留言?

    <3508058830628019025>(以上內容請勿刪除,從括號之後開始留言)

    回覆刪除
  19. <3945588648180671048>(以上內容請勿刪除,從括號之後開始留言)發現不太了解你的訴求...@@"

    Hepha 你是想要裝 facnybox 所以先問問題?還是沒有想裝 fancybox 只是想討論是否會顯示兩張圖?

    如果想裝的話,其實直接動手安裝,你的問題一下就能得到答案了,比我們這幾個來回花的時間省很多呢~

    如果只想知道 "文章會不會一大一小兩張同時顯示" → 開一篇文章貼抄連結語法就知道答案囉~

    [quote]<3508058830628019025>(以上內容請勿刪除,從括號之後開始留言)[/quote]
    留言內容請按照指示,從括號之後開始留言,才能顯示回覆的效果。

    回覆刪除
  20. 請問要怎麼設定裡面輪播的圖?

    這邊只有講到連結的顯示圖而已,但是裡面輪播的圖要怎麼設定?

    回覆刪除
  21. <5652817439774170505>(以上內容請勿刪除,從括號之後開始留言)文章有說明,且有語法範例了,如果不會用的話,可參考另一個外掛 Owl Carousel → http://www.wfublog.com/2016/04/owl-carousel-jquery-slider-cdn.html

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。