2016年9月1日 星期四

過場效果華麗的 jQuery 圖片輪播外掛 Camera﹍CDN 安裝懶人包

過場效果華麗的 jQuery 圖片輪播外掛 Camera﹍CDN 安裝懶人包

Wayne Fu 0 A+
slideshow-camera-過場效果華麗的 jQuery 圖片輪播外掛 Camera?CDN 安裝懶人包之前曾介紹「Camera 圖片輪播外掛安裝及使用詳解」,他值得推薦的特色不少,除了多樣的炫麗過場特效,幾乎各種想得到的效果都能自訂,更重要的是支援 "自適應" 寬度,這在行動裝置是非常重要的。

可惜的是這個外掛不容易安裝,需要支援目錄式的網路空間(其實幾乎所有輪播外掛都是如此)。上一篇介紹了 Google Drive 的安裝方式,但由於「Google Drive 檔案外連功能將於 2016 年 8 月關閉」,所以原方法失效。當 Google 也不玩了之後,網路上也很難再找到支援目錄式的免費網路空間了。

好消息是,現在有 CDN 提供了官方檔案,不必再尋找網路空間,就能安裝 Camera 這個圖片輪播外掛,請見本篇的教學說明。




一、CDN 檔案


1. CDN 優點

檔案放在 CDN 不但不需擔心網路空間的問題,而且傳輸速度還更快,因為 CDN 會偵測靠我們距離最近的節點來傳輸。


2. CDNJS

這是非常知名的 CDN 服務「CDNJS」所提供的 Camera 檔案連結列表:


camera-slider-cdn-過場效果華麗的 jQuery 圖片輪播外掛 Camera?CDN 安裝懶人包

  • 如果要引用特定檔案,可直接複製連結
  • 目前看到的版本是 1.3.4,也只有這個版本
  • 雖然標示可使用 jQuery 1.9.1 以上版本,但實測後發現會當掉,建議使用 jQuery 1.8.2 或以下的版本



二、安裝懶人包


如不知道要引用哪些檔案,可直接使用以下整理好的連結。

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

以 Blogger 為例,請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Camera/1.3.4/scripts/jquery.mobile.customized.min.js'></script>
<script src='
https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Camera/1.3.4/scripts/camera.min.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/Camera/1.3.4/css/camera.min.css' rel='stylesheet' type='text/css' media='all'></link>

第一行可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過 1.8.2 以上的版本,請刪除其他版本,以免重複安裝。

存檔後即完成所有需要檔案的連結引用,接下來要說名如何放輪播內容的 HTML 碼,以及執行輪播的參數設定。



三、使用方式


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


以下說明請參照以上程式碼行號,以及對照「camera 官網的說明」:

B:綠色字串可自訂,但必須與 I 行綠色字串一致。藍色字串為 skin 色系的參數,不設定也沒關係,要使用的話請參考官網 SKINS 部分的說明。

C~F:這區間為一張圖片的所有參數,請複製這個區間的程式碼,要輪播幾張圖片,就在 F 行與 G 行之間插入幾組程式碼,為了避免複製錯誤,特別在 C、F 行頭尾的 div 用橘色標記起來。

C 行詳解:
  • data-src:藍色字串請改為自己的圖檔網址
  • data-target="_blank":連結另開新視窗,不需要可刪除
  • data-link:綠色字串請改為外連網址。若不需連結可刪除這組參數。
  • data-thumb:填入縮圖網址,若不需縮圖可刪除這組參數。

D~E:這兩行為字幕說明內容,若不需字幕可刪除這兩行

D:藍色字串為字幕效果,可使用的參數請參考官網 CAPTIONS 部分的說明

E:請改為自訂說明字串

I:綠色字串請 B 行綠色字串一致

J:time 代表每張圖片顯示時間,紅字參數 3000 代表 3 秒,若改為 1 秒請置換為 1000

K:固定圖片的高度為 400px,藍色字串可改為自訂像素值,若不需固定高度請刪除此行。

L:預設圖片的過場效果為隨機,若要自訂效果,可放入一組或多組字串,請參考官網說明「fx: 'random'」的部分,有三十多種,例如要放入多組可將字串改為 'simpleFade, mosaic' 這樣的形式,彼此用小寫逗號隔開。

M~N:代表使用縮圖導覽。若不需要請將 pagination 參數改為 true,以及將 thumbnails 改為 false


需要更多參數或其他效果,請參考官網說明;增減參數時要注意,J~N 行每個參數之間用小寫逗號隔開,最後一個參數之後不可有逗點。

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






四、Blogger 圖片處理(Picasa 圖床)


這件事對 Blogger 來說不是好消息,雖然使用 CDN 安裝很方便,但 CAMERA 官方提供的安裝檔,實際上跟 Blogger 後台上傳的圖片(也就是 Picasa 圖床)是相衝的,圖片會無法顯示。那麼為何上一版 WFU 提供的「Camera 圖片輪播外掛安裝及使用詳解」沒有這情形呢?因為我改過了官方原始碼,讓 Blogger 圖片可以相容。

為了要讓 Picasa 圖床的圖片正常顯示,那麼得更改一下安裝方式,在「二、安裝懶人包」這裡的程式碼,有 3 個 cdnjs 連結的 js 檔,請將這 3 個 js 檔連結刪除,改用上一版我提供的檔案,這樣就沒問題了。不過這個流程是有點麻煩的,請按以下步驟:

  • Camera 圖片輪播外掛安裝及使用詳解」→「三、Google Drive 安裝準備動作」→「1. 複製懶人包」,這裡有我提供的 Google Drive 資料夾路徑,內有 17 個檔案。
  • 將其中的 camera-all.js 這個檔案下載
  • 放到你的 Dropbox 資料夾
  • 利用「Dropbox 外連產生器」,取得這個檔案的外連網址
  • 將原本 3 個 cdnjs 連結的 js 外連,改成你的 Dropbox 外連,這樣就可以了


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

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP