2014年11月6日

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

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 網頁效果:

26 則留言:

  1. T_T 我買的模版這功能已經失效了,我自己學這篇做一個好了

    回覆刪除
  2. 20 個免費好用的響應式 jQuery 輪播幻燈片插件 網址已經掛掉了樣子?

    回覆刪除
  3. 不好意思請問一下,我安裝後沒有反應,畫面一直處於在繞的狀態
    回頭到版面配置查看語法時,C及D行內容不見了,只剩下E欄的說明字串= =
    麻煩Wayne協助^^
    網址 http://www.hairblog.tw/ (因不能正常顯示,暫時放側邊欄下方,廣告上面)
    我改的內容筆記 https://docs.google.com/document/d/1-cfCB5m-gCo10GwA3nsSyNE1IjLbDKx5iYJ2qCnA8yI/edit?usp=sharing
    再次感謝您

    回覆刪除
    回覆
    1. 你的 C 行 div 標籤沒有結尾 > 喔,每一組都一樣,再仔細比對一下吧~

      刪除
    2. 抱歉喔!太大意了^^已修正!!順利完成!!謝謝你的分享,效果超好
      恕小弟不才,剛剛看了camera 官網的說明還是不知該如何調整才能使用"全螢幕"這個範例裡的倒數效果??(在底下跑數秒的效果)

      刪除
    3. loader: 'bar'

      增減參數時要注意,每個參數用小寫逗號隔開,最後一個參數之後不可有逗點。

      刪除
    4. 哇!!大感謝,順利完成,效果超美的,再次謝謝你
      我也把它放在行動版上使用^^

      刪除
    5. 不客氣,效果的確不錯~ ^^

      刪除
  4. 您好:我安裝了此功能之後也是沒有任何反應~
    附上網址:http://www.yasuwedding.com/
    也附上自己修改的程式碼:https://drive.google.com/file/d/0B8XaM9cy64bZTWZsckdDSXJUQ0U/view?usp=sharing

    不知道是否是圖片的問題,因為加上文字的話是有出現~但因我不想顯示文字所以文字有取消~
    再麻煩您了,謝謝

    回覆刪除
  5. 您好:我發現我上傳自己修改的程式碼因用記事本所以有些亂碼
    再附一次連結檔:https://drive.google.com/file/d/0B8XaM9cy64bZWkZfdHVFeG9PYmM/view?usp=sharing

    謝謝您

    回覆刪除
    回覆
    1. 然後安裝jquery的程式碼在這:https://drive.google.com/file/d/0B8XaM9cy64bZa000Ylo5d1IzSmM/view?usp=sharing

      刪除
    2. 不好意思讓你打了這麼多字,由於貴站是商業網站,請參閱「諮詢服務」→「2. 商業/客製諮詢」

      刪除
  6. Wayne Fu 您好~

    使用您提供程式碼 目前出現 " 部落格網站「會員系統」試營運" 無法播放相片
    請教安裝哪兒出錯了~ 再麻煩撥空幫忙協助

    blogger 的網址
    http://sunaohsu.blogspot.tw/

    camera 檔案連結
    https://www.dropbox.com/sh/btlivdpmytyr6o2/AADj-VLvnpw6C0GUkKP5Tgu0a?dl=0

    程式安裝內容 PS:上一個留有誤 再此更正
    https://www.dropbox.com/s/oz6yainnwny1x5c/%E7%9B%B8%E7%89%87%E6%92%AD%E6%94%BE.txt?dl=0

    回覆刪除
    回覆
    1. 請問你的 dropbox 是 2012 年或之前申請的帳號嗎?如果不是的話,檔案應該無法外連。我測試了你的 dropbox 外連檔案,是無法執行的。

      如果你有用 Google Drive 的話,可參考這篇將檔案改上傳到 Google Drive: http://www.wfublog.com/2014/04/google-drive-bandwidth-limit.html

      我會找個時間在本文提醒 dropbox 使用者這件事,順便補上 Google Drive 的操作步驟。

      刪除
    2. 再麻煩 Wayne Fu 製作Google Drive 按裝放方式
      以上感謝分享

      刪除
    3. 已修改本文敘述,並新增「三、Google Drive 安裝準備動作」,請按照步驟進行即可。

      刪除
  7. 我想用camera 外連我用github 不過看文章不太懂要怎麼把它加到一篇文章裡面@@(段落之間)

    回覆刪除
    回覆
    1. 按照「四、使用方式」的說明

      刪除
    2. 我照做了可是圖片一直跑不出來耶

      http://jimjamysontep.blogspot.tw/2016/08/gpsspoofer.html

      刪除
    3. 謝謝回報,檢查了一下,安裝的連結可能複製貼上時搞錯了,如果你是下載我的檔案,請將原本:

      三、Google Drive 安裝準備動作 → 3. 安裝程式碼 → 原本是 "你的外連路徑/camera-min.js" → 改成 "你的外連路徑/camera-all.js "

      這樣應該就可以了

      刪除
  8. 作者已經移除這則留言。

    回覆刪除
    回覆
    1. 你好,看了您的網站,請參考留言注意事項:

      詢問非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」

      http://www.wfublog.com/2013/06/service-suggest-cooperation.html

      刪除
    2. 好的!感謝您的回覆!!~

      刪除
  9. 請問有辦法調整寬度嗎?

    回覆刪除
    回覆
    1. 你要調整的區塊直接設寬度就好囉

      刪除

張貼留言注意事項:

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