到處蒐集免費有用的軟體、線上服務、小技巧……

banner 背景來源Flicker| 點閱次數:

[原創]在Blogger Beta使用Lightbox顯示圖片

Lightbox是一種滿炫的效果,點擊網頁上的圖片或連結後,背景彷彿電影要開演前一樣變暗,然後顯示Loading的訊息,接著就顯示出內容(圖片或網頁)。檢視實際效果請點下圖。

Free Image Hosting at www.ImageShack.us

目前blog上使用的Lightbox套件很多,這裡所選用的是「Lightbox JS v2.0 by Lokesh Dhakar」並加以修改部份圖片的網址。

為了讓大家能夠快速的使用,我已經做好修改並於在「Google Page」上,只要依照以下步驟您就可以立即擁有Lightbox的效果!

 

Step 1. 修改 Template

進「Template\Edit HTML」的畫面。請先備份(點擊 Download Full Template)。找到以下代碼。
]]></b:skin>
</head>
<body>

然後插入以下代碼,詳細情形請點這裡觀看。

 

Step 2. 修改 Post

在要套用Lightbox效果的圖片或連結加上「rel="lightbox"」並將href指向要顯示的內容url。如上面的範例中,小圖的url是http://img228.imageshack.us/img228/6883/104357ao3.th.jpg,而大圖的url是href="http://img228.imageshack.us/img228/6883/104357ao3.jpg,完整的HTML代碼如下:

更多Lightbox的運用(如多圖顯示)請參考「Lightbox JS v2.0」或「swf.com.tw » 使用LightBox展示線上影像」的介紹。

UPDATE-2007/03/21
更正 teaegg 提出的問題:發現一個bug,用首頁最下面「較舊的文章」裡頭所看到之前文章的圖片,Lightbox的效果會出不來。請問有沒有解決方法?

修改範本

在</body>前面加上以下片段。

參考資料:Racklin's 阿土伯程式大觀園: Blogger Hack Tip #1 - Hacking Blogger index.html

UPDATE-2007/12/16

由於JS和CSS和大家共用,效果偶爾會時好時壞,是因為「頻寬用盡(如下)」的問題
The bandwidth or page view limit for this site has been exceeded and the page cannot be viewed at this time. Once the site is below the limit, it will once again begin serving as normal.

如果你有自己的空間(如:Google Page)可以到http://www.box.net/shared/jg4i6me7n7下載Lightbox工具包,解壓縮後有5個檔案。上傳到你自己的空間,再修改Step1的路徑。

81 留言:

fooyun 提到...

确实满漂亮的效果
第一次见这样的效果还是在一个提供 blogger 模版的 blogger 里~

顺便想问问,怎么把评论界面简化到只有一个小窗口呢~`不错~`不错`~

platypus 提到...

你好,我試用但有點問題.它不讓我save,顯示如下:
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "script" must be terminated by the matching end-tag "".

國良先生 提到...

TO platypus
不好意思,原本的代碼多了一些無用的引號所以直接貼上會造成無法儲存。
現在已經修正了,請再試試。

國良先生 提到...

TO fooyun
>> 怎么把评论界面简化到只有一个小窗口呢
是什麼意思?

platypus 提到...

謝謝你!果真成功了!

(我想上面那位的意思也許是問如何按post a comment時會跳出ㄧ個新的comment小視窗)

FosterTAZ 提到...
作者已經移除這則留言。
FosterTAZ 提到...

感謝國良先生幫助 :D

PS.為保留一點隱私權,所以把求問的Comment刪除了;請各位見諒 :)

小帽 提到...

分享一個有趣的東西Flash blog show : poque.jp

§一身傲骨§ Mr.Jade 提到...

不好意思,想請問一下;
我要如何更改LIGHTBOX跳出視窗裡的文字顏色?
就是指,當我點選照片後,會跳出LIGHTBOX的視窗遊覽照片,但它下面會出現你所輸入的文字,但要怎麼更改顏色?
感謝感謝!!

國良先生 提到...

TO §一身傲骨§ Mr.Jade
改變文字顏色,要修改lightbox.css裡的
#imageData #caption
加上 color:red 就會變成紅色了。

Sierra 提到...

試用後,發現載入似乎比官網還慢,連結蠻複雜一時找不出,問題在哪邊。雖然有些連到googlepages有些似乎有連到別的地方。

Sour 提到...

为什么上传到blogger的图片用lightbox不能显示那(就一个loading图片转啊转),而引用别的网站上的图片却正常???啊~不解啊.

teaegg 提到...

發現一個bug,用首頁最下面「較舊的文章」裡頭所看到之前文章的圖片,Lightbox的效果會出不來。請問有沒有解決方法?

Epay 提到...

为什么我的图片会显示溢出呢?
把注释那一栏都要给挡住

國良先生 提到...

TO Epay
請問你是用什麼瀏覽器觀看?另外,可否留下有圖片溢出的文章的URL。

淡季 提到...

我贴进去,但是没有效果,为什么?

國良先生 提到...

TO 淡季
我在你的BLOG上沒有看到相關的代碼,無法說明沒效果的原因。

國良先生 提到...

TO teaegg
你的問題已經有解決方法了!請參考本文UPDATE部份。

teaegg 提到...

加入那段script之後問題解決了,多謝國良先生的幫忙。

提到...

不好意思,我不是用blogger的使用者,請問在其他的blog裡也可以用Lightbox的效果嗎~??

國良先生 提到...

TO 侍
可以自行加入或修改CSS及Javascript的BLOG平台應該都可以。

anapple 提到...

這項功能 實在太水噹噹了
實在感謝你的教學

ethanfurn 提到...

好棒的功能阿~~~感覺真的很讚~~
謝謝你的教學....
喔對了....我想請問一下
我已經安裝語法了
那之後的圖片他會自己套用這個模式嗎 ?
還是我還要自己再加上rel="lightbox"這個語法呢 ?

國良先生 提到...

TO ethanfurn
新文章的圖要自己手動加上 rel="lightbox"

BLUE 提到...

想請問一下
都按照上面的代碼複製貼上
但是按圖的時候
卻出現另一個視窗直接顯示圖片
而不是LIGHTBOX的漂亮特效呢
是代碼貼錯還是???
謝謝!

國良先生 提到...

TO blue
如果是另開視窗顯示圖片就表示沒有設定成功。
檢查一下代碼有沒有貼好,圖片有沒有加上「rel="lightbox"」

BLUE 提到...

請問貼的圖只能限定於文章嗎?
因為我的圖是在上頭的banner
所以按了以後是直接開啟視窗
不過我也加了您所說的rel="lightbox
不過還是沒出來...
(不好意思再次打擾)

國良先生 提到...

TO blue
請留下你的blog網址,這樣比較容易找出問題。

BLUE 提到...

http://www.blue-inmyblueway.blogspot.com/
最上頭大圖的地方...
煩請大大幫我看一下
謝謝囉^^"

國良先生 提到...

TO blue
最上面的大圖,我在IE和FF看都有lightbox的效果,應該是你已經改好了吧。

BLUE 提到...

@@
我自己是使用IE
不過自己看的時候沒有
那我用別的電腦試試看好了
謝謝大大幫我解答

shr 提到...

更正 teaegg 提出的問題:發現一個bug,用首頁最下面「較舊的文章」裡頭所看到之前文章的圖片,Lightbox的效果會出不來。請問有沒有解決方法?

請問上面說的「較舊的文章」裡頭所看到之前文章的圖片,需要重新加上「rel="lightbox"」嗎? 還是只需將UPDATE-2007/03/21的內容貼進Template就可以呢?
謝謝

國良先生 提到...

TO shr
「較舊的文章」裡頭所看到之前文章的圖片必須重新加上「rel="lightbox"」才有效果。

shr 提到...

了解了,謝謝

愛格 提到...

請問,如果想自己做一份放在googlepage的檔案,要怎麼修改以及上傳呢(googlepage好像不可以上傳檔案夾...那路徑要怎麼改才對呢...)謝謝!!!!

國良先生 提到...

TO 愛格
googlepage確實無法上傳及新增檔案夾。
你可以參考Step1中有1個CSS檔和3個JS檔,下載後再上傳到你的googlepage。
記得要改有klcintw的地方。

zina 提到...

良人你好:
我是blog的初學者,研究了好久,終於有轉圈圈的效果,可是圖顯示不出來,可以幫我看一下嗎?以下是我的網址....謝謝你
http://chenzina.blogspot.com

國良先生 提到...

TO zina
你都有按照步驟做對
問題似乎是在大圖
建議你換個地方放大圖
如免費的 http://imageshack.us/ 就OK了

songbang 提到...

國良先生請教一下, 我把這4個檔案備份到我的googlepages裡, 但是我更改路徑之後發現, scriptaculous.js 似乎不會作用, 但是改成你的空間位址之後又可以, 這是為什麼呢??
我的blog:
http://songbangwu.blogspot.com

國良先生 提到...

TO songbang
你缺了 http://klcintw.js.googlepages.com/effects.js
它雖然不用加在範本裡,但scriptaculous.js會用到它。
所以請把它上傳到你的googlepage

songbang 提到...

成功了!! 感謝國良先生的指導 ^^

electro 提到...

版主你好
首先謝謝你的這篇教學,我已經接近完成了這個功能,但是不知為什麼當我點閱圖片開啟LIGHT BOX的時候,不會顯示close跟x的圖示?
我有點不明白為什麼,是因為還須要上傳這兩個圖檔嗎?

這是我的BLOG http://zeitti.blogspot.com/
可以幫我看看嗎?

謝謝版主~~

國良先生 提到...

TO electro
請修改你的lightbox.js,將fileLoadingImage和fileBottomNavCloseImage指定正確圖示位置。

electro 提到...

謝謝國良大哥~~
教學有方啊~~

DeepSeaSprite 提到...

今天突然無法顯示這個效果了,怎麼回事呢?

國良先生 提到...

TO DeepSeaSprite
因為頻寬被用光了 XD

The bandwidth limit for this site has been exceeded.

ROAN 提到...

對不起....國良先生....
我想請問一下....我也有試過您教的方式...
大家的留言我也都看了...
但是還是不大懂為甚麼我的照片點選以後
會卡在讀取的轉圈圈部份...
可以幫我看一下下嗎....
感恩....

http://suroan.blogspot.com/2007/07/slipaw.html

國良先生 提到...

TO roan
原本應該連到大圖的URL,你輸入的是相本的網址。

BTW
你相本裡的照片都滿漂亮的。

ROAN 提到...

TO 國良先生....
大圖的URL我會想辦法找到的...謝謝...(:))

還有...照片謝謝你的誇獎 (XD)

marselip 提到...

我試了兩張布蘭妮 轉到大圖時 還是一直轉,開不了耶
marselip.blogspot.com

國良先生 提到...

TO marselip
在[Step 2. 修改 Post]中的href必須指向圖檔本身,像你的「http://img443.imageshack.us/my.php?image=e100422aee5.jpg」應該改成「http://img443.imageshack.us/img443/4141/e100422aee5.jpg」

marselip 提到...

轉出來了耶...太謝謝您了

Bryan 提到...

國良你好,很謝謝你提供了這麼有趣又實用的特效,但是我用了怎麼有的時候可以,有的時候又不行?請看一下我的blog

國良先生 提到...

TO bryan
建議你換個地方放大圖
如免費的 http://imageshack.us/
Google的Picasa不讓人直接連到圖片。

Bryan 提到...

國良,還是不行耶~

國良先生 提到...

TO bryan
建議你到http://www.box.net/shared/jg4i6me7n7下載Lightbox工具包,解壓縮後有5個檔案。
上傳到你自己的GooglePage,再修改Step1的路徑。

因為我的JS和CSS和大家共用,常會發生「頻寬用盡(如下)」的問題,所以效果會時好時壞。
The bandwidth or page view limit for this site has been exceeded and the page cannot be viewed at this time. Once the site is below the limit, it will once again begin serving as normal.

Bryan 提到...

國良,我照著你的話做,上傳5個檔案,修改step1的4個路徑,結果他說錯誤,請幫我看一下,謝謝

國良先生 提到...

TO Bryan
每次試都會發生錯誤嗎?

不然你把我加入你BLOG的作者並有管理的權限,直接幫你看,弄好之後再刪掉。

klcintw(at)gmail.com

Bryan 提到...

國良,加入囉~還有,為什麼我的信箱都沒有收到Follow-up comments?

國良先生 提到...

Hi Bryan
我已加入了,但只有作者的權限,還需要管理的權限才能改範本。

Email follow-up應該是新功能(沒有中文翻譯),我已在你的BLOG回應並勾選,你在那邊回覆,看我有沒有收到通知。

Idle 提到...

不好意思
我照著UPDATE做後
點首頁下方「較舊的文章」還是一樣無法正常顯示lightbox耶...
請問該怎麼辦><

Idle 提到...

我大概知道原因了!!
因為我有把lightbox傳到自己的Page Creator,有把網址都改成我自己的
但是....
大大的
「http://klcintw.css.googlepages.com/lightbox.css」

「http://klcintw.googlepages.com/lightbox.css」
都可以正確找到這個位置
我的網址多那個.css就會出現「The site you have requested could not be found. (404)」
請問是Page Creator有要做什麼設定嗎??

國良先生 提到...

TO Idle
那是因為我把lightbox.css放在2個地方。
klcintw.css是我申請的網址,你的網址沒有.css就不需要加。

Idle 提到...

原來那是另一個帳號啊...
我還以為css功能這麼強大到網址加個.css都能用= =(完全不會語法的我 !囧")
但我把所有網址換成我自己的,就沒辦法出現lightbox了耶....
除了改第一個步驟的網址之外還有什麼地方要改嗎?
還是說lightbox的各個檔案需要在做細部編輯??

國良先生 提到...

TO Idle
你可以參考本文中剛剛加上的「UPDATE-2007/12/16」有5個檔案要上傳到你的空間。

Idle 提到...

咦~~
成功了~~
原來是我自己少傳到effects.js...
難怪不管怎麼仔細地修正link都是失敗= =

總之,謝謝大大了~~

Sam@自我色彩 提到...

國良兄,
小弟也用了以上的教學不過效果都沒有出來,不知道是什麼問題....

國良先生 提到...

TO Sam@自我色彩
把<script src="blog-post_files/jquery-latest.js" type="text/javascript"></script>和
$(document).ready(function() {…}拿掉就可以了。

Sam@自我色彩 提到...

國良兄,
很不好意思,我找了我的程式裡面沒有<script src="blog-post_files/jquery-latest.js" type="text/javascript"></script>和
$(document).ready(function() {…}
小弟實在是不知道怎麼解決,不知道可否幫忙說明一下

國良先生 提到...

TO Sam@自我色彩
請參考此圖 http://img401.imageshack.us/my.php?image=snap057is0.jpg

Sam@自我色彩 提到...

國良兄,
小弟看到你的圖以後發現他了,不過小弟發現如果把兩段內容移除,就會發生收藏本文的功能就會消失,不知道這有沒有辦法解決

Sam@自我色彩 提到...

感謝國良兄,我的問題我已經找到解決方式了,排除了這個問題...
快樂使用中

光羽佳 提到...
作者已經移除這則留言。
squall 提到...

我今天使用也碰到奇怪的問題,應該是prototype.js的關係

但是一直找不出來原因,我目前使用最新版的lightbox,在firefox效果都正常,在ie開就會當機了!

不知道您是否有遇到類似的問題呢?

我的BLOG: http://squallfan.blogspot.com

只要把prototype.js拿掉,就可以使用ie開,但是效果就沒了XD

如果使用您的js,會變成lightbox效果不會出來,但是blog會正常...

謝謝你囉 :)

國良先生 提到...

TO squall
我用IE7點你blog上的白尾八哥照片都很正常的顯示效果。

Bryan 提到...

國良兄,你的lightbox可以像Lokesh Dhakar的一樣用一組相片嗎?

國良先生 提到...

TO Bryan
可以用一組圖片,方法如同Lokesh Dhakar所述。

Bryan 提到...

用成功了,謝謝^^

kilocooper 提到...

請問一下喔!!這種用法用在ie6上再加上有用繼續閱讀功能後是不是就會失效!?我在ie7以及ff上試驗都可以唯讀ie6不行,可是我在良大的blog上用ie6看卻是可以!?我想問題會不會出在"繼續閱讀"功能上!?可以麻煩幫我看一下ㄇ!?^^"
http://kilocooperzone.blogspot.com/

孝承 提到...

終於找到這個效果了~~

感謝大大詳盡的教學~~

不過能請教一個問題嗎?

這個效果有版權的問題嗎?如果放至購物網(商業行為),是否會有侵權的問題呢?

因為英文不是很好,找不到相關的資料,有勞大大了~~

國良先生 提到...

TO 孝承
這種效果有太多人做出來了。
如果你要用到商業行為的話,最好是參考其中的技術,自行撰寫(或模仿)。