2014年10月9日

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

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


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

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

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


1. 原始效果

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



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


2. 縮圖+滾輪特效

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



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



二、本篇特效使用的檔案


請對照「上一篇」→「二、部落格安裝 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 的參數使用,請參閱「官方說明書」。



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


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

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





上圖為檔案列表,將所有檔案下載後,請參考上一篇「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 系列文章:

1 則留言:

張貼留言注意事項:

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