2011年4月14日 星期四

在 Blogger 為圖片連結加上 Lightbox 特效

本篇文章為轉貼文章,有著作權之保護,如要轉貼,請經過原始創作人之同意。


        Lightbox 是一套用來展示網頁圖片的 Javascript 程式碼,可以很簡單地添加在網頁上。只要你的網頁連結到 Lightbox 的 Stylesheet 及Javascript 程式檔,然後在網頁圖片上的超連結加上適當的語法,便能令網頁展示大圖時產生 Lightbox 特效。

        Lightbox 最初由 Lokesh Dhakar 開發,當這個好玩的意念開始在網上流傳之後,許多程式設計師便紛紛倣傚改良,製作其獨特的版本並將功能鄺充,現在如果以 Lightbox 這關鍵字於搜尋器上搜尋,不難找到其他如 ThickBox,SlimBox 等不同的 Lightbox 版本。

        因為不同版本的 Lightbox 可能會支援不同的圖檔超連結語法,如果為部落格中的圖檔超連結添加了某個語法,經過一段時間之後發現更加正點但不能支援現有語法的 Lightbox 版本,到時便要煩惱如何修改大量添加了舊有語法的超連結了。因此建議在部落格添加這個特效前最好先行測試各個版本的功能,選定最合心意的版本後才為部落格 進行裝修工程。

        你現正瀏覽的這個部落格所採用的是一個名為 Lightbox Plus 的版本。這個版本添加了原祖 Lightbox 2 版本所沒有的自動跟視窗放大縮小的功能,支援原祖版本的超連結語法,界面亦算簡單易明,如果你對這個版本有興趣,可到 http://serennz.sakura.ne.jp/toybox/lightbox/ 下載測試。

        當找到合適的 Lightbox 版本後,第一件事先要找一個網上空間寄存 Lightbox 的程式檔。不同版本的 Lightbox 所需上傳的檔案各有不同。就以現在我所用的 Lightbox Plus 版本為例,當我下載及解壓檔案後,我只需上傳 sample 資料夾內的 resource 資料夾及資料夾內的所有內容到我的網上空間便可以;因為我想日後容易辨認我所上傳資料夾的內容,所以我將 resource 資料夾在我的網上空間改名為 lightboxplus。

        接著登入 blogger,到版面配置 => 修改 HTML,在 "修改範本" 視窗中搜尋 <head> tag,在 <head> tag 下添加以下指向網上空間中  lightbox.css 及 lightbox_plus.js 的語法 (只加插紅色部份)。



... <head>
 <!--lightboxadd-on START-->
<link href='http://chiwawah.web.fc2.com/lightboxplus/lightbox.css' media='screen,tv' rel='stylesheet' type='text/css'/>
<script charset='UTF-8' src='http://chiwawah.web.fc2.com/lightboxplus/lightbox_plus.js' type='text/javascript'/>
<!--lightboxadd-on END-->
 <b:include data='blog' name='all-head-content'/>...
  


        如果你懶得自己再找網上寄存空間,可以直接使用以上語法借用寄存在我的網上空間內的程式檔。

        因為現今很多免費的網上寄存空間都不能支援遠端圖檔存取,如果你是使用自己的寄存空間,特別是一些免費的寄存空間,很大機會你要另覓途徑儲存 Lightbox 程式所需的圖檔。以這個部落格所用的 Lightbox plus 為例,因為 Blogger 可以存取 Picasa 上的圖檔,所以我先將 resource 資料夾內的所有圖檔上傳到一個 Picasa 的 Album 內,並記下每個圖檔在 Picasa Album 內的超連結位置。

        之後在 Windows 內用記事本 (notepad) 打開 resource 資料夾內的 lightbox_plus.js 檔案,在檔案最尾段可以找到以下 function 的語法,將語法內原本指向 resource 資料夾內各 gif 圖檔的超連結改成 Picasa Album 內的超連結,如下 :

Spica.Event.run(function() {
var lightbox = new Lightbox({
loadingimg:'resource/loading.gif',
loadingimg:'http://lh5.ggpht.com/_eRY1Cgd9sl8/SxnQFaeqYfI/AAAAAAAADnA/pEwq4vIulo0/loading.gif',
expandimg:'resource/expand.gif',
expandimg:'http://lh6.ggpht.com/_eRY1Cgd9sl8/SxnQFDhgOGI/AAAAAAAADm8/YzCJCFvWbKg/expand.gif',
shrinkimg:'resource/shrink.gif',
shrinkimg:'http://lh5.ggpht.com/_eRY1Cgd9sl8/SxnQK2kQYFI/AAAAAAAADnM/JeDmZTB8MDo/shrink.gif',
blankimg:'resource/blank.gif',
blankimg:'http://lh6.ggpht.com/_eRY1Cgd9sl8/SxnQEzJV4XI/AAAAAAAADm0/2x8Uj9eJdKU/blank.gif',
previmg:'resource/prev.gif',
previmg:'http://lh3.ggpht.com/_eRY1Cgd9sl8/SxnQKguLwpI/AAAAAAAADnI/7ZqAuwV5b24/prev.gif',
nextimg:'resource/next.gif',
nextimg:'http://lh4.ggpht.com/_eRY1Cgd9sl8/SxnQFon85BI/AAAAAAAADnE/RYCVJlV00fc/next.gif',
closeimg:'resource/close.gif',
closeimg:'http://lh4.ggpht.com/_eRY1Cgd9sl8/SxnQFF0y6oI/AAAAAAAADm4/nPJ7MJdj93M/close.gif',
effectimg:'resource/zzoop.gif',
effectimg:'http://lh5.ggpht.com/_eRY1Cgd9sl8/SxnQK8rYLnI/AAAAAAAADnQ/_89vZBllYqY/zzoop.gif',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
resizable:true,
animation:true
});
});

完成後再將 lightbox_plus.js 檔上傳到網上空間。

        以上準備功夫完成後便可在部落格文章內為各圖片超連結添加 Lightbox 語法。最常用的圖片超連結語法有兩個;第一個是為單一圖片添加 Lightbox 特效;方法是在 <a ref ...> tag 中加上 rel="lightbox" 語法,例子如下 :

<a href="http://lh4.ggpht.com/_eRY1Cgd9sl8/SxpmfxaS_5I/AAAAAAAADzI/-fKT2NC4Bns/IMG_1843.jpg" rel="lightbox">
<img height="260"  src="http://lh4.ggpht.com/_eRY1Cgd9sl8/SxpmfxaS_5I/AAAAAAAADzI/-fKT2NC4Bns/IMG_1843.jpg"  style="border-width: 1px;" width="390" />
</a>
  

        另一個常用的語法是為一組圖片添加 Lightbox 特效;方法是在 <a ...="" href="" ref=""> tag 中加上 rel="lightbox[group]" 語法,即所有同組的圖檔連結以相同的 group 名稱命名,這樣當游標滑入放大了的影像範圍時,影像便會顯示 "下一張" 或 "上一張" 相片的圖示,例子如下 :

<a href="http://lh3.ggpht.com/_eRY1Cgd9sl8/SxpsK0Rx0sI/AAAAAAAAD_o/taEzMRuo9hY/CRW_2637.jpg" rel="lightbox[1]">
<img height="260"  src="http://lh3.ggpht.com/_eRY1Cgd9sl8/SxpsK0Rx0sI/AAAAAAAAD_o/taEzMRuo9hY/CRW_2637.jpg"  style="border-width: 1px;" width="390" />
</a>
<a href="http://lh3.ggpht.com/_eRY1Cgd9sl8/SxpkReVTR7I/AAAAAAAADuM/6WqASE2HIPc/IMG_1714.jpg" rel="lightbox[1]">
<img height="260"  src="http://lh3.ggpht.com/_eRY1Cgd9sl8/SxpkReVTR7I/AAAAAAAADuM/6WqASE2HIPc/IMG_1714.jpg"  style="border-width: 1px;" width="390" />
</a>
<a href="http://lh6.ggpht.com/_eRY1Cgd9sl8/Sxpmi8cYGII/AAAAAAAADzQ/9033ITYp82I/IMG_1856.jpg" rel="lightbox[1]">
<img height="260"  src="http://lh6.ggpht.com/_eRY1Cgd9sl8/Sxpmi8cYGII/AAAAAAAADzQ/9033ITYp82I/IMG_1856.jpg"  style="border-width: 1px;" width="390" />
</a> 

        其他的語法通常會在各個 Lightbox 版本的下載網站中詳列。看到這裡,有沒有興趣跟我一樣,為自己的部落格加上這個好玩的特效呢 ~~。


文章來源:http://chiwawah.blogspot.com/2010/01/blogger-lightbox.html

沒有留言:

張貼留言