2014年11月1日 星期六

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

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

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

其中有許多功能強悍的輪播效果,甚至能展示各種 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 的源碼網頁:



按右手邊的 "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 資料夾路徑:




請看上圖,這個資料夾內共有 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 安裝懶人包」→「三、使用方式」即可


可參考以下官方 DEMO 網頁,更瞭解 camera 能實現哪些效果:





更多 jQuery 網頁效果:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP