Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (2)縮圖+滾輪特效安裝懶人包

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


上一篇的「fancybox 安裝教學」說明了如何從官網下載檔案、上傳到自己的空間、最後利用本站提供的簡便前導程式來顯示效果，其過程十分繁複。

喜歡懶人包的讀者可以不用折騰了，這篇除了提供打包好的檔案，也提供簡便安裝的方式。然而 fancybox 功能非常多，這個懶人包的缺點就是，只能遷就 WFU 打包好的功能與效果。不過本文提供的懶人包，包含了「縮圖+滾輪特效」，也就是完全模擬 Blogger 官方的燈箱效果，相信對多數使用者而言，已經非常美觀及實用了。

一、「縮圖+滾輪特效」的優點

1. 原始效果

曾看過上一篇的讀者應該看過原本的 DEMO 頁面效果，請按下面按鈕前往示範網頁：

Fancybox 原始效果

WFU 不太喜歡這個預設效果，因為用滑鼠滾輪、或手動切換圖片的時候，圖片會上下或左右劇烈晃動，看得眼睛都花了。


2. 縮圖+滾輪特效

現在可以比對一下這個懶人包的效果，請點以下按鈕前往示範頁面：

Fancybox 縮圖+滾輪特效

除了畫面不再晃動以外，多了縮圖提示效果，也可方便瞭解閱覽圖片的進度、或是否已經看完所有的圖片；若沒有縮圖，當圖片一多時，讀者一定不會發現已經滾完一輪了。

二、本篇特效使用的檔案

請對照「上一篇」→「二、部落格安裝 fancybox 的方法」，本篇的特效並沒有使用所有的 js 及 CSS 檔，只使用了以下原始檔的內容：

• jquery.fancybox.pack.js → 主程式
• jquery.fancybox-thumbs.js → 縮圖
• jquery.mousewheel-3.0.6.pack.js → 滾輪
• jquery.fancybox.css → 主要 css
• jquery.fancybox-thumbs.css → 縮圖 css
• fancybox_sprite.png
• fancybox_overlay.png
• fancybox_sprite@2x.png
• fancybox_loading.gif
• blank.gif
• fancybox_loading@2x.gif

另外為了節省空間及方便引用，將三個 js 檔及兩個 css 檔全部壓縮，及合併為一個 js 檔及一個 css 檔。

三、安裝程式碼

1. 準備動作

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」，搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jquery，以免重複安裝。


2. 安裝程式碼

接著請搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：

3. 修改參數

請對照以上程式碼行號：

G~R：這部分的內容與作用，跟上一篇完全一樣，以下只摘錄重點──E 行的紅色字串 .post-body 是 Blogger 平台的文章區塊，如果非 Blogger 平台，建議利用「Chrome 開發人員工具」找出文章區塊的 class 或 id，然後置換此字串(class 的前面要加 "."，而 id 前面要加 "#")。這段前導程式做的事情為：

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

S~AD：這段程式碼為 fancybox 的參數設定

T~U：設定了前一張圖片、下一張圖片的切換效果。藍色字串 "fade" 代表為 "淡入淡出" 的效果。可以改為 "none"，代表沒有切換效果。或是改為 "elastic" 就是預設的、看了頭暈的搖晃效果。

W：藍色字串 "true" 代表「滾輪切換圖片時，背景畫面不會跟著上下捲動」。

Y~Z：藍色數字 "50" 分別設定了縮圖尺寸寬、高的像素(px)值。

存檔後找一篇圖片多的文章來測試，即可看到效果，或是點以下按鈕前往示範頁面：

Fancybox 縮圖+滾輪特效

更多其他 fancybox 的參數使用，請參閱「官方說明書」。

四、備份及分流 js、CSS、圖檔

雖然使用這個懶人包很方便，可以無痛體驗 fancybox 的特效，然而這些連結檔案放在 WFU 的 Google Drive 空間，過去發生了「Google Drive 流量限速」的情形，為了避免將來某天這個小工具無預警罷工，請讀者有空時，務必將相關檔案分流。

除了程式碼 B、C 行的 js/css 檔，還有 6 個圖檔也必須分流。為了方便操作，我把所有 8 個檔案放在以下 Google Drive 資料夾路徑：

• https://drive.google.com/folderview?id=0BykclfTTti-0UENiUFpueXBHZUk&usp=sharing#list

上圖為檔案列表，將所有檔案下載後，請參考上一篇「fancybox 安裝教學」→「二、部落格安裝 fancybox 的方法」→「3. 上傳檔案方式 2」，將所有檔案上傳到自己的 Google Drive，放在同一個資料夾，並設定共用權限。

最後將自己的 js 檔及 css 檔外連路徑，置換程式碼 B、C 行綠色字串的路徑，就完成了檔案分流，可以避免將來流量遭到限制。


2016.4.13 公告：由於「Google Drive 將於 2016 年 8 月關閉外連」功能，屆時程式碼 B、C 行的外連都將失效，請讀者將上面這個 Google Drive 資料夾路徑中的 8 個檔案下載，並存放到自己的雲端空間(必須是目錄型的空間)，取得自己的 JS/CSS 檔案連結後，自行置換 B、C 行的綠色字串連結。

如不清楚何謂 "目錄型的空間"，可參考「徹底解決網站外連空間問題」→「支援目錄路徑的雲端空間」。

Fancybox 系列文章：