「布丁布丁吃什麼？」加入圖片燈箱特效檢視功能 / New Feature: Lightbox
簡單記錄一下，本Blog加入了圖片檢視器Lightbox燈箱的功能。現在點選圖片不會變成開新視窗或直接跳到圖片的網址，取而代之的是顯示黑色背景、完整圖片的檢視畫面。但是因為我的Blog樣板並非預設的Blogger範本，所以這個功能並不是為了給所有Blogger使用者來使用的，僅供進階網頁開發者參考。以下記錄建置此功能的過程。
Blogger的燈箱功能 / Lightbox feature in Blogger Default Template
(圖片來自於：Blogger Debuts Google+ Inspired Lightbox Slideshow for Photos)
什麼是燈箱特效呢？上圖就是一個燈箱特效的範例。圖片會被放大到符合整個瀏覽器的尺寸，然後背景為黑底，以凸顯圖片為主體的檢視畫面，這就是現在網頁設計中時常出現的燈箱特效。
Blogger的預設範本已經貼心地為使用這加入了燈箱的特效，上圖就是來自於Blogger的實際效果。Blogger還加入了多張圖片巡迴瀏覽的功能，這也是現在燈箱特效常常會具備的功能之一。因此一般使用者其實不必特別研究如何在Blog中加入這個功能。
相較之下，傳統的圖片縮圖檢視加上完整圖片鏈接的寫法 (例如： <a href="/path/to/img" target="_blank"><img src="/path/to/thumb" /></a> )，現在已經不再流行了。
那為何我還要研究如何在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
原始的Lightbox 2採用MIT授權發佈，因此我可以合法地使用它的函式庫，並在此跟大家分享、供想要研究的人參考。我將程式碼放在GitHub上，大家可以任意檢視與取用：
- lightbox2-lokeshdhakar: https://github.com/pulipulichen/blogger/tree/gh-pages/posts/2016/09/20160928-lightbox2-lokeshdhakar
雖然這不是給一般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> 
大家覺得這個燈箱特效好用嗎？歡迎在下面回應的地方表達您的意見！
我也是使用Open Live Writer，之前沒有s1600-h，但昨天發佈的文章，圖片都是s1600-h。
回覆刪除我想使用直接刪除-h的語法，但不懂用，(因為自己使用了別的燈箱)
然後試試你文章中的教學
Blogger Install jQuery Lightbox
和
你提供的試範語法
我在自己的日誌和新開了一個日誌測試，也沒法打開燈箱 QAQ 圖片連結也沒有刪除-h
我按照教學擺放試範語法，但好像沒有效果，不知道自己是不是安裝錯誤.
我說錯了，新開的日誌成功了，我再看看自己的日誌，可能安裝了很多語法有干擾吧....
刪除我都忘了修改了什麼...(誤
這就很難說了，用了多種工具總是容易相衝
刪除拿掉一些工具交叉檢查吧！
我再重新試一次，這次成功了。
刪除不過一直以來我都有一個問題困擾，Lightbox未載入完成時，點擊圖片還是會直接進入圖片。
但今天找到這個，未載入完成時，點擊圖片會另開新頁 http://nio127.blogspot.hk/2009/03/01.html(我還沒測試過)，
不知道你的網誌是不是使用這個方法，好像你的網誌不會點擊進圖片裡
To Kit,
刪除啊...抱歉，我看不太懂你在問什麼
什麼叫做點擊進圖片呢？
燈箱特效很多，挑一個你喜歡的來用就好
抱歉我有點懶得比較別人的技術QQ
作者已經移除這則留言。
刪除原本點擊圖片是會出現燈箱特效。
刪除就是剛進入網頁，網頁還在LOADING中 (應該是JS還沒載入完成)， 這時不會有燈箱功能，
那點擊圖片，不會出現燈箱特效，反而會進入圖片的連結中。
這個問題，算是解決了，就是將JS載入放在更前的地方，(刪除$(document).ready(function()
刪除可能會在讀入網頁時有卡一下的感覺，自己不懂JS語法，算是不完美中的解決辦法 0.0
賀!
刪除那就是提早載入就可以了，恭喜！
布丁您好，我對這篇文章有興趣研究，感謝您的分享！
回覆刪除To YUAN,
刪除不客氣。不過Blogger圖片網址的格式一直有在改變，請注意文章的寫法跟現在的網址應該不太一樣了。