2016年1月13日

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

A+
fancybox-cdn-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 外連,請看這個網址的列表:

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

  • 上圖可看到該網頁列出 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. 安裝程式碼

接著請搜尋 </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 系列文章:

沒有留言:

↑TOP

張貼留言注意事項:

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