2014年8月15日

Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (1)安裝教學

Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (1)安裝教學

Wayne Fu 0 A+
2016.4.13 公告:為了避免上傳檔案、尋找免費空間的麻煩,最簡單的安裝方式請直接參考這篇「Fancybox 燈箱外掛 CDN 安裝懶人包」。


圖片為主的網站若使用燈箱效果,當特效執行時,相信能給予讀者很有質感的加分印象。而這次介紹的 fancybox 燈箱外掛,除了有優雅的展示畫面,更令人驚豔的是,就算不使用圖片的燈箱效果,只要發揮創意,Fancybox 還能做各種應用,例如文字幻燈片、影片彈出、文字提示視窗。而會寫 js、jquery 的話,fancybox 也有 API 能實現各種想像力。

不過讀者請記住一個原則,功能越強、設定越多的的工具,就越不容易學習、操作與上手;功能越簡單、越單一的工具,就越容易安裝,不過也沒什麼項目能設定。

而 fancybox 則是屬於,不但設定不容易,連基本安裝都可能碰壁的一套工具。看了一些網路教學,發現要實現基礎的功能都很有難度,不過要歸咎起來的話,算是官方的問題比較大。而本文的教學說明,相信至少讓讀者能正確安裝,並了解如何套用官方說明書。




一、前言


前言不是已經一大串了嗎,怎麼還有前言?在開始之前,要先了解的概念真的非常多,所以請耐心看下去。

1. 官方說明

首先,必須說「官方說明」做得很差、不利閱讀,且所有主要訊息擠在一個狹長頁面。依照官方的安裝方式,只適合自行架站、有主機的網站,對於一般部落格平台完全不適用,所有的預設小圖示都將無法顯示。

或許從另一個角度看,fancybox 的目標不擺在部落格平台吧!他的客群可能只想針對自架站,這樣才比較有獲利來源(下一點說明)。


2. 非商業網站限定

這個外掛允許個人、非商業網站使用,因此商業網站請參考這個「使用價格」頁面,有提供單一、及不限網站使用的價格選項。


3. 系列文

會找到這個外掛,主要是想取代 Blogger 的官方燈箱效果,從而發現 fancybox 可以模擬的很好。這個系列文目前預定至少有三篇,第一篇只適合喜歡自訂功能、喜歡折騰的讀者。

而第二篇,會提供模擬 Blogger 燈箱效果的 fancybox 懶人包。如果有相同需求的讀者,或許可以等下一篇(這一篇你可能看不下去)。



二、部落格安裝 fancybox 的方法


前面提到,按照官方說明來安裝 fancybox 的話,因為那些 CSS 安裝檔,裡面附了許多預設圖檔的連結,而那些圖檔,得一併上傳到自己的主機。但一般非自行架站的部落格,哪來的主機呢?所以 CSS 內的圖檔路徑當然都讀不到圖了。




請參照以上官網 →「Instructions」,這裡是安裝的程式碼,不過先別複製,因為這些路徑都是不存在的,請依照以下步驟──


1. 下載檔案

從官網頁面往下移動,會看到「License / Download」→ 按下「Download v2.1.5」,可下載所有需要的原始檔。

接著解壓縮成一個資料夾「fancyapps-fancyBox-18d1712」→ 裡面有很多檔案,不過重要的是 Lib、Source 這兩個資料夾 → 將 Lib 資料夾中的 jquery.mousewheel-?.?.?.pack.js 這個檔案,移動到 Source 資料夾裡面。

最後進入 Source 資料夾,將 Helpers 資料夾裡面的所有檔案,移動到 Source 資料夾,這樣所有的檔案就都集中在一起了,如下圖──




2. 上傳檔案方式 1

有兩種上傳檔案的方式,第一個方式比較麻煩,但也許比較好也說不定。

先將 Source 資料夾所有圖檔上傳到自己的圖床空間,然後逐一檢視 Source 資料夾所有的 CSS 檔,檢查有外連圖檔的敘述,將那些圖檔的連結,改成自己的圖床連結,這樣才能讀得到這些圖。

最後將所有的 js、CSS 檔上傳到自己的網路空間即可。怕麻煩的讀者,可採用第二種方式──Google Drive。


3. 上傳檔案方式 2

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


將 Source 資料夾所有檔案(包含圖檔)上傳到 Google Drive,請參考「外連 js 檔──Google Drive」→「三、Google Drive 的操作」。

當所有的檔案都放在 Google Drive 的同一個資料夾、並確定是公開分享的狀態,那些圖檔不必特別設定路徑,就能被 CSS 檔讀取到(因為放在同一個資料夾),因此這是比較方便的操作方式。


4. 取得外連路徑

安裝程式碼之前,要取得剛剛上傳的那些 js、CSS 檔路徑,如果是 Google Drive,前面的教學文章連結,已經有說明取得檔案路徑的方法,請把這些外連路徑紀錄起來。



三、安裝程式碼


做了這麼多動作,終於可以開始安裝程式碼,回到官方網頁 →「Instructions」,逐一說明如下,這部份的所有程式碼請放在範本中 </head> 之前:

1. Jquery

先檢查是否範本中已經有安裝 jquery、且版本在 1.8 以上。如果否的話,請增加以下這一行

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

2. 滑鼠滾輪外掛

這一項為非必要安裝,不過 WFU 建議安裝,因為提供讀者便利的操作方式,以下請填入對應的檔案外連路徑:

<script type="text/javascript" src="填入jquery.mousewheel-?.?.?.pack.js路徑"></script>


3. 主程式碼

主程式碼必須安裝,以下請填入對應的檔案外連路徑:

<link rel="stylesheet" href="填入jquery.fancybox.css?v=2.1.5路徑" type="text/css" media="screen" />
<script type="text/javascript" src="填入jquery.fancybox.pack.js?v=2.1.5路徑"></script>


4. 輔助功能程式碼

這部份為非必要安裝,請依自己需求安裝。檔案中的字串分別代表:
  • "button":按鈕
  • "media":多媒體
  • "thumbs":縮圖

以下請填入對應的檔案外連路徑:

<link rel="stylesheet" href="填入jquery.fancybox-buttons.css?v=1.0.5路徑" type="text/css" media="screen" />
<script type="text/javascript" src="填入jquery.fancybox-buttons.js?v=1.0.5路徑"></script>
<script type="text/javascript" src="填入jquery.fancybox-media.js?v=1.0.6路徑"></script>

<link rel="stylesheet" href="填入jquery.fancybox-thumbs.css?v=1.0.7路徑" type="text/css" media="screen" />
<script type="text/javascript" src="填入jquery.fancybox-thumbs.js?v=1.0.7路徑"></script>




四、簡易使用說明


1. 官方操作說明

根據官方的說明,要使用 fancybox 效果,操作方法其實滿繁複的,首先,想出現燈箱特效的圖片,得手動加入以下 html 語法:

<a class="fancybox" rel="group" href="大圖網址1.jpg"><img src="小圖網址1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="大圖網址2.jpg"><img src="小圖網址2.jpg" alt="" /></a>


然後在範本中 </body> 字串的前一行,插入以下程式碼:

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>



2. 前導程式

當部落格有數十篇、數百篇文章,根本不可能一一叫出來,把圖片 html 碼改成這個格式來展示燈箱效果,這可是一個巨大的工程。

為了解決這個問題,WFU 寫了一個前導程式,可不必修改 html 碼,請放在範本中 </body> 前一行即可:



請根據以上程式碼行號修改──

E:紅色字串 .post-body 是 Blogger 平台的文章區塊,如果非 Blogger 平台,建議利用「Chrome 開發人員工具」找出文章區塊的 class 或 id,然後置換此字串(class 的前面要加 ".",而 id 前面要加 "#")。

M、P:這兩行的藍色字串 "fancybox" 可自訂,不過這兩處字串必須一致。

P:綠色字串也可自訂。


稍微說明一下這個方便的前導程式,做了哪些事情:

  • 只抓出文章區塊的圖片來展示燈箱效果,自動加上 fancybox 需要的參數,不需要手動設定
  • facnybox 預設有超連結的圖片,才能展示燈箱效果,但網頁有的圖片可能當初忘了設定超連結,那麼這個前導程式可以自動補上超連結

使用以上簡便的前導程式後,就可馬上先測試一下 fancybox 的效果。如果都按照本文步驟進行,安裝全部的套件,那麼沒使用任何進階設定、最陽春的效果也能跟這個 DEMO 頁面一樣優雅:




五、小結


fancybox 的安裝並不省事,否則也不需要特地寫一篇文章了。有的讀者可能覺得麻煩,而產生這樣的想法:打開 DEMO 頁面、或本站的原始碼,直接找 js、css 的連結複製到自己的網站使用,只要幾秒鐘就完成了。

這樣的作法,短時間是見效的,不過 WFU 可以直接公佈結果,請參考這篇「Google Drive(js檔)流量限速,建議自行分流」。等某天檔案失效了,還是得回來看這篇,乖乖自行上傳所有檔案。

另外,如果想要更豐富的特效、縮圖等等,還需要加入更多的 js 語法參數,這部份將有待其餘系列文的補充說明。


Fancybox 系列文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

12 則留言:

  1. 你真好心機啊! 這麼詳文紒紹!
    早前在 blogger 設定裏有燈箱效果, 但沒去硑究啊!

    回覆刪除
  2. 沒說有滾輪效果還真的沒發現 XD

    回覆刪除
  3. Fancybox 安裝在 Blogger 還真有點麻煩,文章中 html 的運用也需要編寫甚多。Drive 可以同目錄抓相對路徑啊?讓我對它印象又加分了!

    回覆刪除
  4. blogger 還好一點,fancybox 似乎有 bug
    個人經驗是用舊版 IE 看時,會連線到一些不存在的網址
    如 www.wfublog.com/2014/08/fancybox-lightbox-installation/fancy_shadow_se.png

    如果是自架 wordpress 就會加重伺服器的負擔 (如果人流很多的話)

    回覆刪除
  5. 所以我也可以改裝這個並且拿掉原本的lightbox自訂搜尋然後就可以裝lazyloard了嗎?

    回覆刪除
  6. <5491683785521693177>(以上內容請勿刪除,以下引言請自行刪減) [quote]謝謝提供資訊~舊版IE啊...以前我每個程式還會去測舊IE的效果,現在都懶得管了,讓他早早淘汰吧...XD看來WP要考慮的東西真不少,連裝個外掛也要斤斤計較伺服器的負擔,真是不同的世界![/quote]

    不,實際上並不需要斤斤計較
    只是之前用平價無限 plan 但有大量流量湧入
    而我又因為設定不周,沒有將 404 error 交回 server 處理,所以才成為了壓倒駱駝的最後一根草

    回覆刪除
  7. <1897373795355745608>(以上內容請勿刪除,從括號之後開始留言)

    多一點,但並不是很多
    一般人 (如我) 連流量用多少都不需要理會
    只是突然有一篇文極受歡迎廣傳才這樣

    回覆刪除
  8. <7924511836807548447>(以上內容請勿刪除,從括號之後開始留言) 恩 我會優先以lazyloard為主要改善進度,另外圖片檔案縮小已經在新文章裡面開始著手了,舊文章.....就讓lazyloard幫忙減輕負擔吧QQ

    回覆刪除
  9. <5854462656911820185>(以上內容請勿刪除,從括號之後開始留言)真的是小確幸,要感謝馬克提醒以及wayne寫了這個lazyloard! 要是再晚各一年發現我恐怕會哭倒。

    回覆刪除
  10. 如果傳大圖,小圖用語法去控制就不用傳兩張了?

    HTML img 標籤的 height 和 width 屬性
    "使用百分比值

    使用 width 屬性的最後一個技巧是使用百分比值來代替像素的絕對值。這將使瀏覽器按照與瀏覽器顯示窗口的一定比例來縮放圖像。因此,如果要創建一個寬度與顯示窗口寬度相同,高度為 30 個像素的彩色橫條,可以這樣實現:

    < img src="/i/ct_1px.gif" width="60%" height="30px" / >"
    http://www.w3school.com.cn/tags/att_img_height-width.asp

    回覆刪除
  11. 利用文章範本阿0●0語法我都是亂抄底子很差><

    http://i.imgur.com/N3l1LU1.png

    我沒裝這個啦,一來很懶,二來早上想到一點,如果用了之後每章圖都會有兩張(一大一小)圖片的語法在文章中,那麼你沒用這個之後,文章會不會一大一小兩張同時顯示?



    回覆多了一行,這是蝦米防垃圾留言?

    <3508058830628019025>(以上內容請勿刪除,從括號之後開始留言)

    回覆刪除
  12. 請問要怎麼設定裡面輪播的圖?

    這邊只有講到連結的顯示圖而已,但是裡面輪播的圖要怎麼設定?

    回覆刪除

張貼留言注意事項:

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

TOP