:::

「布丁布丁吃什麼?」加入圖片燈箱特效檢視功能 / New Feature: Lightbox

image

簡單記錄一下,本Blog加入了圖片檢視器Lightbox燈箱的功能。現在點選圖片不會變成開新視窗或直接跳到圖片的網址,取而代之的是顯示黑色背景、完整圖片的檢視畫面。但是因為我的Blog樣板並非預設的Blogger範本,所以這個功能並不是為了給所有Blogger使用者來使用的,僅供進階網頁開發者參考。以下記錄建置此功能的過程。


Blogger的燈箱功能 / Lightbox feature in Blogger Default Template

Blogger-Debuts-Google-Inspired-Lightbox-Slideshow-for-Photos-2

(圖片來自於:Blogger Debuts Google+ Inspired Lightbox Slideshow for Photos)

什麼是燈箱特效呢?上圖就是一個燈箱特效的範例。圖片會被放大到符合整個瀏覽器的尺寸,然後背景為黑底,以凸顯圖片為主體的檢視畫面,這就是現在網頁設計中時常出現的燈箱特效。

Blogger的預設範本已經貼心地為使用這加入了燈箱的特效,上圖就是來自於Blogger的實際效果。Blogger還加入了多張圖片巡迴瀏覽的功能,這也是現在燈箱特效常常會具備的功能之一。因此一般使用者其實不必特別研究如何在Blog中加入這個功能。

2016-09-28_162349

相較之下,傳統的圖片縮圖檢視加上完整圖片鏈接的寫法 (例如: <a href="/path/to/img" target="_blank"><img src="/path/to/thumb" /></a> ),現在已經不再流行了。

2016-09-28_162032

那為何我還要研究如何在Blogger中加入燈箱特效呢?這是因為我現在是使用Open Live Writer來撰寫Blog,而且我的現在也不是使用預設的Blogger範本,而是使用自訂的Breeze範本。這使得我沒辦法使用Blogger內建的燈箱特效,必須另尋它法。

函式庫以及Picasa圖片連結的問題 / How to Apply Lightbox Libraries on Images Hosted on Picasa?

一開始我找到的功能是這一篇「Add a Custom jQuery Lightbox To Blogger」,但是安裝之後卻發生圖片無法正常讀取的問題。後來我又找了另一篇「Blogger Install jQuery Lightbox」,這一篇點出了為何前一個燈箱特效無法讀取圖片的問題:因為沒有將圖片的連結網址修改

在Blogger中的圖片是上傳到Picasa的相簿中,這個我想大家應該都很清楚。而連結到Picasa的網址可以設定不同的參數,而使得最後顯示的圖片有不同的樣貌。以Open Live Writer所上傳的圖片網址通常會是這樣:

特別注意網址中的s1600-h。這個網址其實只能直接連結,不能插入在網頁之中顯示,像是使用<img src="/path/to/img" />來顯示。因此前一個燈箱特效只是單純顯示圖片連結的網址時,就會發生圖片無法正常讀取的問題。

修正方法是將網址中的s1600-h替換成s1600。具體的程式碼如下:

$.each($(".post a:has(img)"), function(_i){
    if ($(this).attr("href").indexOf("amazon.com") === -1) {
        $(this).attr("href", $(this).attr("href").replace(/s1600-h/g, "s1600"))
    }
});

替換後的網址如下:

雖然這樣子會顯示跟前一個網址一樣的圖片,但是這個網址卻可以正常插入在網頁中,這樣就可以搭配燈箱特效來使用了。

然後我考量到我Blog上的圖片並非旅遊照片或相簿的類型,比較適合單張單張地來檢視、甚至是需要放大圖片來看細節,所以我又找了另一個獨立的燈箱特效函式庫:Lightbox 2來使用。因為個人需求,我再加上了點選燈箱圖片之後可以另外開新視窗顯示圖片,就成為了現在我使用的函式庫了。

「布丁布丁吃什麼?」的燈箱特效原始碼 / Lightbox Source Code

2016-09-28_164453

原始的Lightbox 2採用MIT授權發佈,因此我可以合法地使用它的函式庫,並在此跟大家分享、供想要研究的人參考。我將程式碼放在GitHub上,大家可以任意檢視與取用:

雖然這不是給一般Blogger使用者使用的,但是如果真的想嘗試看看的人,也可以在Blogger範本的</body>之前插入以下程式碼:

<b:if cond='data:blog.pageType == "item"'>
    <script type="text/javascript" src="//github.com/pulipulichen/blogger/tree/gh-pages/posts/2016/09/20160928-lightbox2-lokeshdhakar/init.js"></script>
</b:if>

2016-09-28_164731

大家覺得這個燈箱特效好用嗎?歡迎在下面回應的地方表達您的意見!

總共9 則留言, (我要發問)

  1. 我也是使用Open Live Writer,之前沒有s1600-h,但昨天發佈的文章,圖片都是s1600-h。
    我想使用直接刪除-h的語法,但不懂用,(因為自己使用了別的燈箱)

    然後試試你文章中的教學
    Blogger Install jQuery Lightbox



    你提供的試範語法

    我在自己的日誌和新開了一個日誌測試,也沒法打開燈箱 QAQ 圖片連結也沒有刪除-h
    我按照教學擺放試範語法,但好像沒有效果,不知道自己是不是安裝錯誤.

    回覆刪除
    回覆
    1. 我說錯了,新開的日誌成功了,我再看看自己的日誌,可能安裝了很多語法有干擾吧....
      我都忘了修改了什麼...(誤

      刪除
    2. 這就很難說了,用了多種工具總是容易相衝
      拿掉一些工具交叉檢查吧!

      刪除
    3. 我再重新試一次,這次成功了。
      不過一直以來我都有一個問題困擾,Lightbox未載入完成時,點擊圖片還是會直接進入圖片。
      但今天找到這個,未載入完成時,點擊圖片會另開新頁 http://nio127.blogspot.hk/2009/03/01.html(我還沒測試過),
      不知道你的網誌是不是使用這個方法,好像你的網誌不會點擊進圖片裡

      刪除
    4. To Kit,

      啊...抱歉,我看不太懂你在問什麼
      什麼叫做點擊進圖片呢?

      燈箱特效很多,挑一個你喜歡的來用就好
      抱歉我有點懶得比較別人的技術QQ

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

      刪除
    6. 原本點擊圖片是會出現燈箱特效。
      就是剛進入網頁,網頁還在LOADING中 (應該是JS還沒載入完成), 這時不會有燈箱功能,
      那點擊圖片,不會出現燈箱特效,反而會進入圖片的連結中。

      刪除
    7. 這個問題,算是解決了,就是將JS載入放在更前的地方,(刪除$(document).ready(function()
      可能會在讀入網頁時有卡一下的感覺,自己不懂JS語法,算是不完美中的解決辦法 0.0

      刪除
    8. 賀!

      那就是提早載入就可以了,恭喜!

      刪除

留言工具: