點選圖片的特效-Lightbox2 - 部落格

Table of Contents

看前面文章,有朋友在安裝LightBox2 上有問題,我就來野人獻曝囉:)
與前面不同的是,我在安裝css時,是允許外連的,只是在lightbox.js的設定時,
圖片的路徑容易出錯,我建議大家使用絕對路徑去設置,我猜是因為它多加了#
不過我也沒心力去除錯 :(

網誌圖文版:
http://www.joen.cc/2011/07/lightbox2-shadowbox.html

1. 下載Lightbox2
http://www.lokeshdhakar.com/projects/lightbox2/releases/lightbox2.05.zip


2. 解壓縮後,請檢查位於/css/lightbox.css中的prevlabel.gif
及nextlabel.gif的路徑是否正確。
#prevLink:hover, #prevLink:visited:hover { background: url( prelabel.gif的位置
) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url( nextlabel.gif的位
置) right 15% no-repeat; }


3.檢查/js/lightbox.js中的loading.gif,及closelabel.gif的路徑是否正確。
fileLoadingImage: ' loadlabel.gif的位置 ',
fileBottomNavCloseImage: ' closelabel.gif的位置 ',

此處的位置,如果使用相對位置失敗的話,請直接用絕對位置,因為lightbox2似乎有做
一些路徑的處理; 不過我沒那個心力去除錯 :(


4.將其上傳至網頁空間後,再blogger的範本設定中的<head>到</head>間加入:
<!--Lightbox2 Begin-->

<link href=' lightbox.css的位置 ' media='screen' rel='stylesheet'
type='text/css'/>
<script src=' prototype.js的位置 ' type='text/javascript'/>
<script src=' scriptaculous.js?load=effects,builder 請記得在前面加上
scriptaculous.js 的位置' type='text/javascript'/>
<script src=' lightbox.js的位置' type='text/javascript'/>
<!--LightBox2 End-->
--

All Comments