Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (3) CDN 安裝懶人包

最近在進行整理網站外部連結的 "年終大掃除" 行動，目前已經清除所有的 "網站小圖示" (改用「Font Awesome 圖示字型」)，以及刪除 "Google 自訂搜尋" (改用「Ajax 搜尋框」)。接下來成為目標的，是「Fancybox」這個檔案肥大的 jQuery 燈箱外掛 。

Fancybox 不但容量大、而且檔案又多，外部連結包含了 JS/CSS/一堆小圖示。除非網站完全不用燈箱效果，不然 Fancybox 還滿難割捨的，沒什麼檔案小、功能強、效果佳的替代方案。

還好發現有不少網站佛心地為 Fancybox 提供了「CDN」服務，外連檔案若能放在 CDN，速度絕對比自己的網頁空間快上許多，甚至還可能不必外連。

本篇簡單整理使用的方法，並同樣提供一組安裝懶人包。

(圖片出處: pixabay.com)

一、CDN 檔案

1. Fancybox 操作簡介

請參考系列文第一篇「Fancybox 安裝教學」，除了介紹 Fancybox，也提供了安裝流程：

• 下載官網檔案 → 上傳到自己的空間 (Google Drive) → 取得外連路徑 → 安裝程式碼 → 使用方法

這個冗長的流程不但麻煩，安裝失敗的機率也很高。


2. CDN 優點

檔案放在 CDN 除了傳輸速度快，若是熱門的檔案(例如 jQuery)，瀏覽器為了減少網路存取，會直接使用硬碟的快取檔案，那麼甚至可省下網路傳輸的時間。

因此若是越多站長外連 Fancybox 時使用 CDN 檔案，代表有越高的機會，訪客可能在瀏覽器會有 Fancybox 檔案的快取，而加快載入速度。


3. Cloudflare CDN

本篇介紹免費 CDN 霸主 Cloudflare 提供的 Fancybox 外連，請看這個網址的列表：

• https://cdnjs.com/libraries/fancybox

• 上圖可看到該網頁列出 CDN 所有外連檔案的連結
• 紅框處為版本號，2.1.5 是最新版，需要特定版本的話再選擇其他版本即可

如果讀者熟悉如何引用這些外連檔案，那麼就可自行操作了。如果不熟悉的話，可以往下看 WFU 整理的懶人包。

二、CDN 安裝懶人包

1. 懶人包內容

以下的懶人包安裝碼，功能跟「Fancybox(2) 縮圖+滾輪特效安裝懶人包」一樣，沒有載入 Fancybox 所有功能，為了加快速度，只載入了比較常用 "縮圖+滾輪特效"，不過相信已經很夠用了。


2. 準備動作

以 Blogger 為例，請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

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

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


3. 安裝程式碼

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

請對照以上程式碼行號：

B~F：這五個是 CDN 的連結，如需要更多功能，請參考 Fancybox 官網自行增加更多連結檔案。

F：需要注意的是，Fancybox CDN 的檔案之中，不包含 Fancybox 官網包含的滑鼠滾輪功能，因此這一行的外連，需要從另一個 CDN 目錄「jquery-mousewheel」來取得，目前最新的版本是 3.1.13。

I：紅色字串 .post-body 是 Blogger 平台的文章區塊，如果非 Blogger 平台，建議利用「Chrome 開發人員工具」找出文章區塊的 class 或 id，然後置換此字串(class 的前面要加 "."，而 id 前面要加 "#")。這段前導程式做的事情為：

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

U~AF：這段程式碼為 fancybox 的參數設定

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

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

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

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

Fancybox 縮圖+滾輪特效

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

Fancybox 系列文章：