其中有許多功能強悍的輪播效果,甚至能展示各種 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」,搜尋
<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 月關閉外連」功能,建議參考「徹底解決網站外連空間問題」→「支援目錄路徑的雲端空間」,將所有檔案放到這一類的雲端空間。
請使用「Google Drive 外連產生器 V2」來取得檔案的外連路徑,不要直接使用我的檔案外連,因為過去發生「Google Drive流量限速」的情形,這樣可避免外連無預警罷工。
3. 安裝程式碼
在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。
請到後台「範本」→「編輯 HTML」,搜尋
<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 網頁效果:
沒有留言:
張貼留言注意事項:
◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。