[網頁特效小偏方] 分享我們在架設網站/部落格實際遇到過的疑難雜症,或是把一些零散的實用資訊集合起來,讓如同我們一般似懂非懂的老百姓,作為不需融會貫通,但可以解決問題及需求的參考,希望有人因此少耗費一些青春跟這一點都不可愛的程式碼打交道。

目前非常流行一種圖片展示效果:瀏覽者點擊網頁中的小圖片時,背景會立即變暗(半透明)並出現loading的提示畫面,接著從頁面中央優雅的開啟圖框顯示大圖片。這個讓圖片展示更加賞心悅目的效果叫做Lightbox。以圖片為主要內容的本站,當然不落人後也要來一下Lightbox嚕~ 但這幾天試用之後,發現安裝的教學有些令人困惑, 在實際應用上Lightbox也有些問題與小bug。
以下是Lightbox的效果(確定此頁面loading完畢後點擊下面圖片觀看):


Lightbox 2 安裝連結
(安裝步驟在官網有英文說明,中文教學可以參考Jinn's Tech Blog這篇說明蠻清楚的)

症狀一:下載回來的Lightbox檔案要如何處理?
首先你一定要先有自己的網頁空間可以上傳。這問題好像很笨,但我相信一定有人不曉得的啦!下載回來的檔案解壓縮後有三個不同的資料夾,index.html只是教學說明, 不需要上傳,image資料夾裏的兩張jpg範例照片也不需要上傳. 如果你的網頁空間(例如google提供的googlepages)不能將上傳的檔案存放於不同的資料夾,你也可以將三個資料夾內的東西分別上傳全部放在一起。

症狀二:需要的檔案都上傳到網頁空間了,該貼的程式碼也貼了,但Lightbox顯示時有缺圖或無效,或是出現"選擇開啟方式或存入磁碟"的視窗。
你一定是太心急了,上傳之前還有一個很重要的動作,就是先把程式碼中所有gif圖片的連結路徑改為上傳後的真正位置。需要更改的檔案有lightbox.jslightbox.css。找出這兩個文件中所有的../images/檔名.gif 置換成你的網址/資料夾/檔名.gif (如果上傳後沒有將圖檔歸於資料夾,請記得將資料夾/省略,改為網址/檔名.gif即可) 當然,貼入程式碼<head>和</head>中的連結路徑(紅色部分)也要更改為正確位置:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">


症狀三:Lightbox功能時好時壞,有時沒有問題,有時卻又出現"選擇開啟方式或存入磁碟"的視窗。
這問題特別容易在firefox出現,因為firefox的loading特別慢。請確定頁面載入完全後再點擊圖片。若在網頁頁面loading中途點擊圖片,就會出現"選擇開啟方式或存入磁碟"的視窗,並停止載入的動作。此時必須重新刷新頁面,等待頁面loading完全後再試一次。(也有可能是所選擇存放連結文件的網路空間不穩定,若是如此,那就只好把網址部份改為http://www.huddletogether.com 借用官網本身的連結,但缺點是當官網改址或存放路徑變動都會使你的lighbox失效)

症狀四:非上述問題,但點擊小圖仍然出現"選擇開啟方式或存入磁碟"的視窗。
檢查一下body標籤裡是否設定了onload屬性,如果有,請在後面加上以下紅色部分:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">

症狀五:Lightbox連續看圖有問題。
確認這組圖片是否都設為同樣的群組名稱(單一圖片則不需設[群組名稱])。圖片不可自行編號順序,瀏覽順序是依照放置圖片的前後順序。
<a href="大圖連結路徑" rel="lightbox[群組名稱]" title="文字說明"><img src="小圖連結路徑"></a>
p.s.文字說明若要加入連結,請將title改為以下紅色部分
<a href="大圖連結路徑" rel="lightbox[群組名稱]" title="&lt;a href=&quot;網址連結&quot;&gt;文字說明&lt;/a&gt;"><img src="小圖連結路徑"></a>

症狀六:從blog首頁點入older post(較舊的文章)頁面後,即失去Lightbox功能。
請在</body>前加入以下內容:
<script>
var WidgetManager_HandleControllerResult = _WidgetManager._HandleControllerResult;
_WidgetManager._HandleControllerResult = function() {
try {
WidgetManager_HandleControllerResult.apply(this, arguments);
initLightbox();
} catch(e) {}
}
</script>


症狀七:Lightbox圖框開啟的速度太快或太慢。
請在lightbox.js文件中找出var resizeSpeed參數,更改預設數值7 (0~10分別為由慢到快)

症狀八:Lightbox瀏覽圖片時拉大瀏覽器視窗,底圖維持原尺寸無法覆蓋增大範圍。
試試看在css裡加入下面的body屬性(但並非對所有版型都適用):
body{margin:0;padding:0;}
以上我最不能忍受的是最後一點,因為畫面破了一塊真的很礙眼;另外它只能用來瀏覽圖片,展示圖片的尺寸不會隨視窗大小自動調整,也都是美中不足。(未完待續……)

9 回應:

  1. Little fan said...

    請問一下,我對於網頁語言比較不懂,這套Lightbox如果我想使用在新浪部落格內,該如何動手,我已將有HINET的網頁空間,Lightbox程式資料夾我已經下載下來了,就是不知道如何開始,能給個導引嗎?
    ...謝謝!
    我的msn:fpc65081@hotmail.com  

  2. Ivy said...

    不好意思現在才回覆你.新浪的部落格我沒有使用過,如果新浪沒有提供自由修改html的功能的話,我想各家的部落格都有提供自設欄位(就是放文章類別標籤雲人數統計的那一些小區塊),你可以把原本該貼在html中的程式碼,直接貼在任何一個自設欄位中,或是另外設一個欄位來貼也可以.試試看嚕!希望有解決你的疑問.  

  3. myng said...

    有個小問題..
    請問一定要上傳了網頁才能使用lightbox嗎?
    因為我用dreamweaver做了個網站,用來交功課, 所以不會上傳到web server, 那麼我能用lightbox這個功能嗎?  

  4. Ivy said...

    不需要上傳一樣可以看得到效果,要將連結的相關檔案(.js/.css/圖檔)一併附上,最重要的是連結的資料夾路徑一定要正確.寫完程式記得先在各個瀏覽器預覽效果,如果預覽沒問題應該就不會有問題嚕~  

  5. myng said...

    終於解決了~
    無限個謝謝!!  

  6. P∞H said...

    不好意思,我試著使用light box時,語法都打上去了,但點圖後只有loading的畫面,跑不出圖,請問大大這個問題可能出在那裡?

    http://wailampooh.blogspot.com/

    我設在six DBN 這篇文章的圖~  

  7. Ivy said...

    P∞H
    這是圖片的問題不是lightbox的關係
    你的連結網址有誤
    請把原始圖片的連結http://bp3.blogger.com/_zWbSzrzS9i8/R5UDM-XhhSI/AAAAAAAAAEg/3MVRPxj1JnQ/s1600-h/six+dbn+artworks_part2.jpg
    改為http://bp3.blogger.com/_zWbSzrzS9i8/R5UDM-XhhSI/AAAAAAAAAEg/3MVRPxj1JnQ/s1600/six+dbn+artworks_part2.jpg
    這樣就可以嚕  

  8. P∞H said...

    哈~ 可以了
    謝謝大大的指導喔^_^  

  9. Knox said...

    不好意思想請問一下

    如果在Blog中貼了youtube等swf影片, 但開啟lightbox功能放大圖片時, 圖片部分會被swf影片蓋過, 這樣的問題該如何解決呢?謝謝!!

    案例網址:http://www.demarcolab.com/blog/