1. 從官網上下載 「Lytebox」
現時版本是 v3.22: lytebox_v3.22.zip
2. 下載並解壓後，先將資料夾「images」中的圖檔上轉到網上空間/相簿中。
3.打開Lytebox.css，並修改圖片的路徑
#lbLoading {
position: absolute; top: 45%; left: 0%; height: 32px; width: 100%; text-align: center; line-height: 0; background: url(網上空間/相簿的路徑/loading.gif) center no-repeat;
}
#lbPrev { width: 49%; height: 100%; background: transparent url(網上空間/相簿的路徑/blank.gif) no-repeat; display: block; left: 0; float: left; }
#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(網上空間/相簿的路徑/prev_grey.gif) left 15% no-repeat; }
#lbPrev.red:hover, #lbPrev.red:visited:hover { background: url(網上空間/相簿的路徑/prev_red.gif) left 15% no-repeat; }
#lbPrev.green:hover, #lbPrev.green:visited:hover { background: url(網上空間/相簿的路徑/prev_green.gif) left 15% no-repeat; }
#lbPrev.blue:hover, #lbPrev.blue:visited:hover { background: url(網上空間/相簿的路徑/prev_blue.gif) left 15% no-repeat; }
#lbPrev.gold:hover, #lbPrev.gold:visited:hover { background: url(網上空間/相簿的路徑/prev_gold.gif) left 15% no-repeat; }
#lbNext { width: 49%; height: 100%; background: transparent url(網上空間/相簿的路徑/blank.gif) no-repeat; display: block; right: 0; float: right; }
#lbNext.grey:hover, #lbNext.grey:visited:hover { background: url(網上空間/相簿的路徑/next_grey.gif) right 15% no-repeat; }
#lbNext.red:hover, #lbNext.red:visited:hover { background: url(網上空間/相簿的路徑/next_red.gif) right 15% no-repeat; }
#lbNext.green:hover, #lbNext.green:visited:hover { background: url(網上空間/相簿的路徑/next_green.gif) right 15% no-repeat; }
#lbNext.blue:hover, #lbNext.blue:visited:hover { background: url(網上空間/相簿的路徑/next_blue.gif) right 15% no-repeat; }
#lbNext.gold:hover, #lbNext.gold:visited:hover { background: url(網上空間/相簿的路徑/next_gold.gif) right 15% no-repeat; }
#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
#lbClose.grey { background: url(網上空間/相簿的路徑/close_grey.png) no-repeat; }
#lbClose.red { background: url(網上空間/相簿的路徑/close_red.png) no-repeat; }
#lbClose.green { background: url(網上空間/相簿的路徑/close_green.png) no-repeat; }
#lbClose.blue { background: url(網上空間/相簿的路徑/close_blue.png) no-repeat; }
#lbClose.gold { background: url(網上空間/相簿的路徑/close_gold.png) no-repeat; }
#lbPlay { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
#lbPlay.grey { background: url(網上空間/相簿的路徑/play_grey.png) no-repeat; }
#lbPlay.red { background: url(網上空間/相簿的路徑/play_red.png) no-repeat; }
#lbPlay.green { background: url(網上空間/相簿的路徑/play_green.png) no-repeat; }
#lbPlay.blue { background: url(網上空間/相簿的路徑/play_blue.png) no-repeat; }
#lbPlay.gold { background: url(網上空間/相簿的路徑/play_gold.png) no-repeat; }
#lbPause { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
#lbPause.grey { background: url(網上空間/相簿的路徑/pause_grey.png) no-repeat; }
#lbPause.red { background: url(網上空間/相簿的路徑/pause_red.png) no-repeat; }
#lbPause.green { background: url(網上空間/相簿的路徑/pause_green.png) no-repeat; }
#lbPause.blue { background: url(網上空間/相簿的路徑/pause_blue.png) no-repeat; }
#lbPause.gold { background: url(網上空間/相簿的路徑/pause_gold.png) no-repeat; }4. 如有需要，打開Lyetbox.js，並修改設定:
/*** Start Global Configuration ***/
this.theme = 'grey'; // themes: grey (default), red, green, blue, gold < 修改主題顏色
this.hideFlash = true; // controls whether or not Flash objects should be hidden < 是否隱藏flash內容
this.outerBorder = true; // controls whether to show the outer grey (or theme) border < 是否顯示 outerborder
this.resizeSpeed = 8; // controls the speed of the image resizing (1=slowest and 10=fastest) < resize的速度 1暇慢 10最快
this.maxOpacity = 80; // higher opacity = darker overlay, lower opacity = lighter overlay < 透明度
this.navType = 1; // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number < "Prev/Next"按鈕的位置 1=在左右顯示 2=在圖片號碼旁
this.autoResize = false; // controls whether or not images should be resized if larger than the browser window dimensions < 如果圖片大於瀏覽器的大小，是否resize
this.doAnimations =true; // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc. < 有沒有動晝特效
this.borderSize = 12; // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone... < border 大小
/*** End Global Configuration ***/
/*** Configure Slideshow Options ***/
this.slideInterval = 4000; // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds) < Slideshow 的速度 10000=10秒
this.showNavigation = true; // true to display Next/Prev buttons/text during slideshow, false to hide < Slideshow中是否顯示Next/Prev按鈕
this.showClose = true; // true to display the Close button, false to hide < Slideshow中是否顯示close按鈕
this.showDetails = true; // true to display image details (caption, count), false to hide < Slideshow中是否顯示圖片資料
this.showPlayPause = true; // true to display pause/play buttons next to close button, false to hide < Slideshow中是否顯示暫停按鈕
this.autoEnd = true; // true to automatically close Lytebox after the last image is reached, false to keep open < Slideshow完結時是否自動關閉
this.pauseOnNextClick = false; // true to pause the slideshow when the "Next" button is clicked < Slideshow中按next會否暫停
this.pauseOnPrevClick = true; // true to pause the slideshow when the "Prev" button is clicked < Slideshow中按prev會否暫停
/*** End Slideshow Configuration ***/5. 在完成修改後，請將Lytebox.css 和 Lytebox.js 上轉到網上空間。
6. 打開修改 html ，在<haed>後面加上以下的程式碼:
<script language="javascript" src="上傳的網址路徑/lytebox.js" type="text/javascript">
</script>
<link rel="stylesheet" href="上傳的網址路徑/lytebox.css" type="text/css" media="screen" />7. 如要產生效果，要在連結上加上適當的語法:
<>a href="http://draft.blogger.com/images/image-1.jpg">rel="lytebox" title="Image Description">Image #1>
b. 群組圖片加上 rel="lytebox[群組名稱]":
<a href="http://draft.blogger.com/images/image-1.jpg">rel="lytebox[vacation]" title="Mom and Dad">Mom and Dad>
<a href="http://draft.blogger.com/images/image-2.jpg">rel="lytebox[vacation]" title="My Sister">My Sister>
c. Slideshow 加上 rel="lyteshow[群組名稱]" :
<a href="http://draft.blogger.com/images/image-1.jpg" rel="lyteshow[vacation]" title="Mom and Dad">Mom and Dad>
<a href="http://draft.blogger.com/images/image-2.jpg" rel="lyteshow[vacation]" title="My Sister">My Sister>
d. HTML Content 加上 rel="lyteframe":
<a href="http://www.google.com/" title="Search Google">
rev="width: 400px; height: 300px; scrolling: no;">Google Search>
<a href="http://draft.blogger.com/catalog1.htm" rel="lyteframe[catalog]" title="Summer Catalog">Summer Catalog>
<a href="http://draft.blogger.com/catalog1.htm" rel="lyteframe[catalog]" title="Winter Catalog">Winter Catalog>詳細的效果可以在官網上瀏覽。
參考文章: 「影片 網頁 圖片 幻燈片展示特效 Lytebox 安裝完全手冊」
第四回:「Blogger Hack Series: Blogger 範本修改心得(四)」
沒有留言:
發佈留言