jQuery 圖片輪播外掛﹍camera 安裝及使用詳解

許多非官方的 Blogger 範本，都會內建圖片輪播效果，可在部落格首頁展示站長的精選或隨機文章。不過也並非得用這些範本，才能擁有 slideshow 功能，已經有數量龐大、可免費使用的現成 jQuery 函式庫，例如這個網頁「20 個免費好用的響應式 jQuery 輪播幻燈片插件」。

其中有許多功能強悍的輪播效果，甚至能展示各種 3D 特效、一次輪播數張圖片等等。而本文要介紹的這款套件「Camera」，相較之下沒那麼花俏，不過 WFU 正是喜歡他的表現平穩、用途廣泛，相信其適用性可滿足最多的使用者，因此專文介紹。

點此看輪播範例

一、Camera 功能介紹

基本上這個外掛該有的功能都有，也有不少貼心設計，而且是免費的「MIT 授權」：

1. 基本功能

以下是 slideshow 的基本配備：

• 上下頁切換按鈕
• 分頁按鈕
• 幻燈片播放、暫停按鈕
• 至少十數種過場特效

2. 質感

如果網站特質想要展現專業感，那麼這個外掛的表現還滿平穩的，各方面的設計都沒有太突兀或誇張的部分。右上方緩慢旋轉的計時器，讓讀者可以明確知道何時要換圖片，心裡不會產生焦躁感，無形中增加了網站的好感度。

除了使用旋轉的計時器，也能改為進度條的方式，來提示何時播放下一張圖片；同時圖片下方的字幕說明橫條，也增加了不少質感。


3. 加分項目

除了上一點提到的內容，以下都是幫這款外掛加分的特點：

• 圖片能自適應寬度調整顯示範圍
• 可播放文字或影片
• 三十多種 skin 色系可選
• 可自訂各種參數、提供 API
• open source 可自由改源碼

二、Dropbox 安裝準備動作

說到安裝，跟「fancybox 燈箱效果」一樣，這類強大的 jQuery 視覺效果外掛對部落格體系都很不友善，安裝方式只適合有主機的網站。本篇的 Camera 外掛就算把整個英文官網都細讀通透，WFU 認為依然有九成的讀者無法成功安裝在 Blogger 、並顯示完整的效果。

如果安裝過之前介紹的 fancybox，那麼對於本篇的安裝原理就能較快理解與上手。如果你有「Dropbox」帳號，而且是 2012 年之前申請的，就可使用公開資料夾的功能，請繼續往下看。如果是 2013 年以後才申請，請改用「三、Google Drive 安裝準備動作」的方法。


1. 下載與上傳

首先到以下官方放在 Github 的源碼網頁：

• https://github.com/pixedelic/Camera

按右手邊的 "Download ZIP" → 下載後解開這個壓縮檔



如上圖，camera.zip 這個檔案如不用可刪除，而其他資料夾可看出 js/css/圖檔 分別放在不同資料夾。如果按照 fancybox 的安裝方式，把這些資料夾全部上傳到 Google Drive，很可惜 Google Drive 無法完整支援相對路徑，會導致 camera 官方提供的安裝檔案彼此引用路徑錯誤。

因此最方便的安裝方式，為使用 Dropbox 的公開資料夾「Public」。將所有 camera 檔案複製到「Public」資料夾之中，就等於自動上傳到免費的網路空間，可以開始引用 camera 的檔案了。

進入 dropbox 網站並登入後：



WFU 把所有檔案放在 slide2 這個資料夾，上圖可看到上傳的所有 camera 資料夾，而需要的 js 檔就在 scripts 目錄、css 檔就在 css 目錄。




舉例來說，要取得 camera.min.js 這個檔的外連路徑，只要按滑鼠右鍵 → 選擇「複製公開連結」就行了。


2. 安裝程式碼

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

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script src='你的外連路徑/jquery.mobile.customized.min.js'></script>
<script src='你的外連路徑/jquery.easing.1.3.js'></script>
<script src='你的外連路徑/camera.min.js'></script>
<link href='你的外連路徑/camera.css' rel='stylesheet' type='text/css' media='all'></link>
四個綠色字串請改為自己的 js/css 檔路徑。

三、Google Drive 安裝準備動作

如果沒有 Dropbox 公開資料夾的話，請按以下步驟使用 Google Drive 來安裝檔案。

1. 複製懶人包

為了方便讀者安裝，我製作了安裝懶人包，將所有必須安裝的檔案，放在這個 Google Drive 資料夾路徑：

• https://drive.google.com/folderview?id=0BykclfTTti-0cURNZm1Oc2RUaW8#list

請看上圖，這個資料夾內共有 17 個檔案，請登入 Google 帳號後，按右上角紅框的「新增至雲端硬碟」按鈕，複製到自己的 Google Drive。


2. 上傳到目錄型網路空間

2016.4.13 更新：由於「Google Drive 將於 2016年 8 月關閉外連」功能，建議參考「徹底解決網站外連空間問題」→「支援目錄路徑的雲端空間」，將所有檔案放到這一類的雲端空間。

2. 取得外連路徑

請使用「Google Drive 外連產生器 V2」來取得檔案的外連路徑，不要直接使用我的檔案外連，因為過去發生「Google Drive流量限速」的情形，這樣可避免外連無預警罷工。


3. 安裝程式碼

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

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script src='你的外連路徑/jquery.easing.1.3.js'></script>
<script src='你的外連路徑/camera-all.js'></script>
<link href='你的外連路徑/camera.css' rel='stylesheet' type='text/css' media='all'></link>
三個綠色字串請改為自己的 js/css 檔路徑。

四、使用方式

在任何想要展示輪播圖片的地方，加入以下程式碼。例如在「首頁公佈欄」的位置，新增一個「HTML/Javascript」小工具，拉到文章區塊上方，加入以下程式碼即可。


2016.9.28 更新：此部分的程式碼，與新版一樣，請直接參考「過場效果華麗的 jQuery 圖片輪播外掛 Camera﹍CDN 安裝懶人包」→「三、使用方式」即可

更多圖片展示工具：