Skip to main content

Posts

Showing posts from March 6, 2008

[BLOG] Lightbox for Blogger

前兩天發現這個 利用 Lightbox 顯示圖片的小功能,覺得還蠻有趣的;特別花了點時間來試試看。 先來看一下 Lightbox 的效果 單張圖片模式: 點我或點選上方圖片檢視 Lightbox 效果 圖片集模式 (將游標移到圖片左/右上方可點選"NEXT"或"PREV"切換上下張圖片) :   點我或點選上方圖片檢視 Lightbox 效果 有沒有很炫啊~嘿嘿!(有啦~一定要有啦~不然我戲會演不下去 ( ̄▽ ̄")>) 使用方法還蠻簡單的: Step1. 下載 Lightbox JS v2.0 解壓縮後將 "css"、"js" 與 "images" 等三個資料夾複製到個人網站的根目錄,也可以放在 Google Page 上,不過 Google Page 無法上傳整個資料夾,所以請將所有檔案一一上傳,另外記得要先修正 lightbox.css 以及 lightbox.js 中圖片的路徑再上傳至 Google Page (e.g.: "images/loading.gif" 改成 "http://pizip0719.googlepages.com/loading.gif") Step 2. 在 Template 引用相關 js & css 檔 打開您的 Template,在 <\head> 之前加入以下程式碼 <script type="text/javascript" src="http://pizip0719.googlepages.com/prototype.js"></script> <script type="text/javascript" src="http://pizip0719.googlepages.com/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="http://pizip0719.googlepages