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:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH3tzw2BA9-56Fz4j18MV3nQZHE6tn1PSiiR25qsu_8_ihEWojyoywkaSmPOyE0wr5iBA9tCud5YMUDbP0Yt-k1jfUfR1PLglyLciE1PPjTRMcmcRaALY8Csa8oYdJD4dCS4S5fkTuGHs/',
expandimg:'resource/expand.gif',
expandimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM34lbxWwxy1oqlW9yMQQIm4COq5TbuMulTjGZ4OVzbEvlGJvZLrCGzJHKGrjo5IE8xx4G8FMZQnzYdZEOl5ZKUmnPzvXFcGMB4Y1WlLBIF0OpmcVRhCLulN1RBIjMBo9AuYntIo5n5KY/',
shrinkimg:'resource/shrink.gif',
shrinkimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8VmoOltf_iwvRiRzjyAlbMabfJa5SN3Fe_OZDvYuhW9smwbHEEC8J_jLFkFQijKOHS4ksYx5N3HPf98hbNe8knYx5DKkBm1Wv1AtOIdVSM2Plci1NXsxJPCruSrxzhEqnB0tRJTvx834/',
blankimg:'resource/blank.gif',
blankimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSsL8Ew4mx0SBQeNMp_o6H3xC_H-usbDexcUPckzhQsiAact3dev9QXYxiDP4ww3ozRWSx52zATENpKnDGBA9XrundJS0XyIipmnHXpOrfXaajgunD9xs2u8MYaINcl1J33wlP2FlWZWo/',
previmg:'resource/prev.gif',
previmg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLmZPV6XGMZQ76zwdiefXfqaHoIqjzI1q49PouQ2hU9xdmTJttCPPKY1uDLa5aKKPlMoKgWZ34fR6o1ytGK6rblINFVgHkmltEu1tLpYaKlJbJj3YEBOu78D5-GN2_GrihipLsfnz2t3Y/',
nextimg:'resource/next.gif',
nextimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZRRndBFFfDVodrzSBx_1e_xGj95JnIgqlViyuQPX4_z-twVgzpb1KiFV7s_Na58bE-CFq8zWilpiAMwOzANEfZQHRAI6X6njylM0GZGwYtgFxPhDA9eA83Te3PsRbtU3sdqsUsFY5G5o/',
closeimg:'resource/close.gif',
closeimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORBx0jJi6g8KvKeMxU5tupEkR6-O7ChqlF9xkkHhyphenhypheniPxZcV5DKfmu6bJ7CvKu8pcSnm3g_MaC3K9m80A6z6o3iiQS3piPngzIcMcZeKVDfXoJyKRTzlulI44KNGsetzFg1C0OanqWb_E/',
effectimg:'resource/zzoop.gif',
effectimg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjULqlk6kjybPjTb_eZueT0p3AAj-q360A_eNwpeQz-hVIj8Eb0_j21zmIpV8fBeInVtB6VSwly_wT_NXKNbCCiz9ezmf6yrWW6Y5qQQpZfvWUS75E60gKetkreKvY1EnSSo2cCOZ6qqLc/',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
resizable:true,
animation:true
});
});

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

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

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG_rqeBeTfgd53pe7GBXkwdss0MlYYgrNvmS3ffd40xqkx4HDt5w_G2iEjvGFGSG7l3o2cStm1pSA69UyVQtCNkj7RCj2IYBJyO32ZRgnmLw3GFNTrphrTM4niE68RDYKAu-yZi40EZiw/" rel="lightbox">
<img height="260"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG_rqeBeTfgd53pe7GBXkwdss0MlYYgrNvmS3ffd40xqkx4HDt5w_G2iEjvGFGSG7l3o2cStm1pSA69UyVQtCNkj7RCj2IYBJyO32ZRgnmLw3GFNTrphrTM4niE68RDYKAu-yZi40EZiw/"  style="border-width: 1px;" width="390" />
</a>
  

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

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIM2Owcqht6w_l191YMjYc9-SG-rIOJIrZphISgPiebi0vmwzXdTS7HDDyhc_t6ERqXbyxtUmoxVCIuoHKzIC4CzzgrMDI6YB088liFOB3fhN9A7cY_py3sgGbHwb4P1S5038t4xzwzk/" rel="lightbox[1]">
<img height="260"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIM2Owcqht6w_l191YMjYc9-SG-rIOJIrZphISgPiebi0vmwzXdTS7HDDyhc_t6ERqXbyxtUmoxVCIuoHKzIC4CzzgrMDI6YB088liFOB3fhN9A7cY_py3sgGbHwb4P1S5038t4xzwzk/"  style="border-width: 1px;" width="390" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPW-uySxv-gQfXQjqIgsv1U6zsFWDkYB5nPQocuX1fYMZkYhK_buJsArMgOrVi3kBZeIDhZXY1tuC2JKcbURhuPs0m8Y1MctzfG1Lbbg6XNsk9TgvRLtyHBmS-oOEfZ_IBdpicJj_8HI/" rel="lightbox[1]">
<img height="260"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPW-uySxv-gQfXQjqIgsv1U6zsFWDkYB5nPQocuX1fYMZkYhK_buJsArMgOrVi3kBZeIDhZXY1tuC2JKcbURhuPs0m8Y1MctzfG1Lbbg6XNsk9TgvRLtyHBmS-oOEfZ_IBdpicJj_8HI/"  style="border-width: 1px;" width="390" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpS7Ky7z6At7imOLlM42GR01bX7erCg9BtSmwbDtR1IxcQtSa6bvyPQ3EC0p0UxbmDbkE6r-UNLx1Srbcv_sOSW35J9fhZu9LvGJtdJXpD-xUpCBIR-qQ1LLXVAMz5_qu5bwkVyU85Jak/" rel="lightbox[1]">
<img height="260"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpS7Ky7z6At7imOLlM42GR01bX7erCg9BtSmwbDtR1IxcQtSa6bvyPQ3EC0p0UxbmDbkE6r-UNLx1Srbcv_sOSW35J9fhZu9LvGJtdJXpD-xUpCBIR-qQ1LLXVAMz5_qu5bwkVyU85Jak/"  style="border-width: 1px;" width="390" />
</a> 

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


文章來源：http://chiwawah.blogspot.com/2010/01/blogger-lightbox.html
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)