最近在進行整理網站外部連結的 "年終大掃除" 行動，目前已經清除所有的 "網站小圖示" (改用「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 外連，請看這個網址的列表：
- 上圖可看到該網頁列出 CDN 所有外連檔案的連結
- 紅框處為版本號，2.1.5 是最新版，需要特定版本的話再選擇其他版本即可
如果讀者熟悉如何引用這些外連檔案，那麼就可自行操作了。如果不熟悉的話，可以往下看 WFU 整理的懶人包。
二、CDN 安裝懶人包
1. 懶人包內容
以下的懶人包安裝碼，功能跟「Fancybox(2) 縮圖+滾輪特效安裝懶人包」一樣，沒有載入 Fancybox 所有功能，為了加快速度，只載入了比較常用 "縮圖+滾輪特效"，不過相信已經很夠用了。
2. 準備動作
以 Blogger 為例，請到後台「範本」→「編輯 HTML」，搜尋 這個字串，找到後在此字串的前一行，插入以下程式碼：
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jquery，以免重複安裝。
同時修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
3. 安裝程式碼
接著請搜尋
請對照以上程式碼行號：
B~F：這五個是 CDN 的連結，如需要更多功能，請參考 Fancybox 官網自行增加更多連結檔案。
F：需要注意的是，Fancybox CDN 的檔案之中，不包含 Fancybox 官網包含的滑鼠滾輪功能，因此這一行的外連，需要從另一個 CDN 目錄「jquery-mousewheel」來取得，目前最新的版本是 3.1.13。
I：紅色字串
- 只抓出文章區塊的圖片來展示燈箱效果，自動加上 fancybox 需要的參數，不需要手動設定。
- facnybox 預設有超連結的圖片，才能展示燈箱效果，但網頁有的圖片可能當初忘了設定超連結，那麼這個前導程式可以自動補上超連結。
U~AF：這段程式碼為 fancybox 的參數設定
V~W：設定了前一張圖片、下一張圖片的切換效果。藍色字串 "fade" 代表為 "淡入淡出" 的效果。可以改為 "none"，代表沒有切換效果。或是改為 "elastic" 就是預設的、看了頭暈的搖晃效果。
Y：藍色字串 "true" 代表「滾輪切換圖片時，背景畫面不會跟著上下捲動」。
AA~AB：藍色數字 "50" 分別設定了縮圖尺寸寬、高的像素(px)值。
存檔後找一篇圖片多的文章來測試，即可看到效果，或是點以下按鈕前往示範頁面：
更多其他 fancybox 的參數使用，請參閱「官方說明書」。
Fancybox 系列文章：