2010年1月4日

[Blogger] 在Blogger安裝LightBox特效

此篇為點圖放大文章
Lightbox(光箱),是一種讓小圖不需另開新頁,可點選圖片直接在同一頁面瀏覽大圖的酷炫特效,很適合用於美食、旅遊或教學等圖片較多的網站。Lightbox其效果如下:
單一圖片瀏覽
october08-dolphins-calendar-1024x768.jpg 1024-06.jpg
圖片群組瀏覽
dmm01.jpg dmm02.jpg

第一次看到Lightbox效果是在良人的大秘寶上,第一眼就感覺非常特別,很想安裝在自己的Blog上,不過在良人的大秘寶LightBox語法是設置在他自己的空間,會有頻寬用完無法顯示的因素存在。

因此我依照Lightbox 2官網的說明,把檔案架設在Google空間,步驟雖多但相當地簡單,對此特效有興趣的朋友可以依下列方式自行安裝。



一、下載Lightbox檔案
1.至官網下載Lightbox v2.04版本並解壓縮
2.解壓縮後會有三個資料夾(css、images及js)和一個index網頁檔(網頁檔不需要可先刪除)。

二、修改部分檔案資料
註:此步驟會需要修改一些語法,建議先去下載Notepad++ 5.6.3 免安裝中文版 會比較方便。
1.images資料夾中的closelabel、loading、nextlabel及prevlabel圖片上傳至Google Sites空間(如何上傳至Google Sites請自行搜尋,本篇不詳述)

2.使用Notepad++打開css資料夾中的lightbox.css,尋找到下列兩行語法
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
將上列藍色字體替換成剛剛上傳的nextlabel及prevlabel圖片網址。

3.依上一步驟打開js資料夾中的lightbox.js,一樣尋找下列兩行語法
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
將上列藍色字體替換成剛剛上傳的closelabel及loading圖片網址。

4.把以下檔案builder.js、effects.js、lightbox.js、prototype.js、scriptaculous.js及lightbox.css上傳至Google Site空間,注意六個檔案請放在同一個資料夾中。

三、套用Blogger
1.進入Blogger後台點選版面配置->修改 HTML,在</head>之前插入以下語法(請先備份範本)
<link rel="stylesheet" href="上傳空間網址/lightbox.css" type="text/css" media="screen" />
<script src="上傳空間網址/prototype.js" type="text/javascript">
</script>
<script src="上傳空間網址/scriptaculous.js?load=effects,builder" type="text/javascript">
</script>
<script src="上傳空間網址/lightbox.js" type="text/javascript">
</script>

2.編寫文章時,在圖片連接增加「rel="lightbox"」即可,如
<a href="http://image.jpg/" rel="lightbox"><img src="http://image.jpg" /></a><
/code>
若需要群組顯示,則是增加「rel="lightbox[自行添加字母]"」,如
<a href="images1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images3.jpg" rel="lightbox[roadtrip]">image #3</a>

6 則留言:

  1. 您好 我想請教您 這有版型限制嗎
    因為我也是用blogger 但試了一天 都沒用哩 借您的碼貼過去 也沒有效果 想不透~~ 很想應用這效果

    回覆刪除
  2. To ruby:
    Lightbox並沒有限定版型,你可以試試上方良人的大秘寶連接的程式碼,我這邊只是教導自行安裝的步驟,所以用我的程式碼會沒有效果

    回覆刪除
  3. 謝謝您回覆: 其實我是拿你原始檔的那幾行js+你的圖檔原始語法做測試, 因為我也試了好多版本 包括"良人的大秘寶" 但很奇怪 按下去就是不會有那效果, 連拿人家分享的範本的也不行....真的好怪

    回覆刪除
  4. To ruby:
    先確認程式碼是否放對地方,如果程式碼是放置於正確的地方,還是沒顯示,那麼就是圖片的語法錯誤,試試看"良人的大秘寶"最底下的HTML代碼。
    而我設置的方法有點不同,我是另外把CSS檔全部複製到Blogger裡面,所以只使用我的js檔是沒有用的。

    回覆刪除
  5. Thanks for your post, I made it:)

    回覆刪除
  6. 我成功了,大感謝!
    不過很可惜的是,沒辦法跟 easy slider 一起用
    T^T

    回覆刪除