影片網頁圖片幻燈片展示特效 Lytebox 安裝完全手冊!! @ Frank的雜記

2009-12-07 08:56 影片網頁圖片幻燈片展示特效 Lytebox 安裝完全手冊!!

上圖擷取自:[貼圖][美圖]美麗的彩色水滴(19P) @ Frank的雜記 :: Xuite日誌

一.前言

Lytebox 是 Lightbox 2 的改版

功能與相容性都比 Lightbox 安裝還要方便容易!

所以 Frank 選擇了 Lytebox 來作為部落格的圖片展示!!

此篇也是 Frank 之前的文章

Picasa + Cooliris + Lytebox 各式貼圖效果 @ Frank的雜記 :: Xuite日誌

中第七點的補充說明!!

二.開始下載與安裝

先至 Lytebox - Home

下載:(目前版本)

Download Lytebox v3.22

解壓縮後將資料夾上傳方法

如是自行架站:

解壓縮後將資料夾裡所有內容上傳到你的網頁空間

並於<head>裡加入如:

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

若是部落格或其他:

如果你的網頁是部落格或是沒有適當的網頁空間可以上傳

硬是要使用 Lytebox 展示(與 Frank 一樣執著哈!)

Frank 這裡提供幾個解決方法:

(1)

可以將 images 資料夾裡的圖片上傳至自己可外連的相簿或文章中(或空間)

並修改 lytebox.css 裡所有相對應的圖片 url

再將以下 lytebox.css 與 lytebox.js 內容貼到要顯示的頁面或欄位中
(建議!!並不一定要新增欄位!貼在使用中的欄位裡既可!)

也就是這樣的貼法:

lytebox.css

<style type="text/css">貼上 lytebox.css 裡的內容</style>

lytebox.js

<script type="text/javascript">貼上 lytebox.js 裡的內容</script>

Frank 目前使用此法!!

(2)

上面方式行不通的話

將 images 資料夾裡的圖片上傳至自己可外連的相簿或文章中

修改 lytebox.css 裡所有相對應的圖片 url

將修改好的 lytebox.css 與 lytebox.js 上傳至自己的空間

並將要顯示的頁面或欄位中貼上以下代碼:

<script type="text/javascript" language="javascript" src="你上傳的網址路徑/lytebox.js"></script>
<link rel="stylesheet" href="你上傳的網址路徑/lytebox.css" type="text/css" media="screen" />

缺點是此法需要有網路空間來上傳 lytebox.css 與 lytebox.js

且連線速度會影響點擊圖片是否能立即反應!!

(3)

直接使用官方的連結

完全不用上傳與下載與修改任何資料

只要將下方代碼貼到要顯示的頁面或欄位中

<script type="text/javascript" language="javascript" src="http://www.dolem.com/lytebox/lytebox.js"></script>
<link rel="stylesheet" href="http://www.dolem.com/lytebox/lytebox.css" type="text/css" media="screen" />

就會有官方預設的效果!!

缺點是沒有自主性!不能修改效果!!

(4)

上述幾點任意組合吧!!哈哈~~!!

三.連結設定

搞定安裝後就可以在圖片或其他上做設定了!!

單張圖片展示示範-Single Image Example:(rel="lytebox")

<a href="images/image-1.jpg" rel="lytebox" title="Image Description">Image #1</a>

Frank 實際示範:

寫法:

<a target="_blank" href="http://7.share.photo.xuite.net/frank.hgs/1700bfe/3688334/139944816_l.jpg"rel="lytebox"title="<i>Frank的雜記</i>"><img src="http://7.share.photo.xuite.net/frank.hgs/1700bfe/3688334/139944816_m.jpg"border="0"title="點擊看圖" alt="http://7.share.photo.xuite.net/frank.hgs/1700bfe/3688334/139944816_m.jpg"></a>

群組圖片示範-Grouped Images Example:(rel="lytebox[***])

<a href="images/image-1.jpg" rel="lytebox[vacation]" title="Mom and Dad">Mom and Dad</a>
<a href="images/image-2.jpg" rel="lytebox[vacation]" title="My Sister">My Sister</a>

Frank 實際示範:

寫法:

<a target="_blank" href="http://7.share.photo.xuite.net/frank.hgs/1700bfc/3688334/139944814_l.jpg"rel="lytebox[frank-test]"title="<i>Frank的雜記</i>"><img src="http://7.share.photo.xuite.net/frank.hgs/1700bfc/3688334/139944814_t.jpg"border="0"title="點擊看圖" alt="http://7.share.photo.xuite.net/frank.hgs/1700bfc/3688334/139944814_t.jpg"></a>
<a target="_blank" href="http://7.share.photo.xuite.net/frank.hgs/1700b00/3688334/139944818_l.jpg"rel="lytebox[frank-test]"title="<i>Frank的雜記</i>"><img src="http://7.share.photo.xuite.net/frank.hgs/1700b00/3688334/139944818_t.jpg"border="0"title="點擊看圖" alt="http://7.share.photo.xuite.net/frank.hgs/1700b00/3688334/139944818_t.jpg"></a>
<a target="_blank" href="http://7.share.photo.xuite.net/frank.hgs/1700b03/3688334/139944821_l.jpg"rel="lytebox[frank-test]"title="<i>Frank的雜記</i>"><img src="http://7.share.photo.xuite.net/frank.hgs/1700b03/3688334/139944821_t.jpg"border="0"title="點擊看圖" alt="http://7.share.photo.xuite.net/frank.hgs/1700b03/3688334/139944821_t.jpg"></a>
<a target="_blank" href="http://7.share.photo.xuite.net/frank.hgs/1700b06/3688334/139944824_l.jpg"rel="lytebox[frank-test]"title="<i>Frank的雜記</i>"><img src="http://7.share.photo.xuite.net/frank.hgs/1700b06/3688334/139944824_t.jpg"border="0"title="點擊看圖" alt="http://7.share.photo.xuite.net/frank.hgs/1700b06/3688334/139944824_t.jpg"></a>
<a target="_blank" href="http://7.share.photo.xuite.net/frank.hgs/1700b09/3688334/139944827_l.jpg"rel="lytebox[frank-test]"title="<i>Frank的雜記</i>"><img src="http://7.share.photo.xuite.net/frank.hgs/1700b09/3688334/139944827_t.jpg"border="0"title="點擊看圖" alt="http://7.share.photo.xuite.net/frank.hgs/1700b09/3688334/139944827_t.jpg"></a>

幻燈片自動播放示範-Slideshow Example:(rel="lyteshow[***])

<a href="images/image-1.jpg" rel="lyteshow[vacation]" title="Mom and Dad">Mom and Dad</a>
<a href="images/image-2.jpg" rel="lyteshow[vacation]" title="My Sister">My Sister</a>

Frank 實際示範:

寫法:

<a target="_blank" href="http://7.share.photo.xuite.net/frank.hgs/1700bfc/3688334/139944814_l.jpg"rel="lyteshow[frank-test2]"title="<i>Frank的雜記</i>"><img src="http://7.share.photo.xuite.net/frank.hgs/1700bfc/3688334/139944814_t.jpg"border="0"title="點擊看圖" alt="http://7.share.photo.xuite.net/frank.hgs/1700bfc/3688334/139944814_t.jpg"></a>
<a target="_blank" href="http://7.share.photo.xuite.net/frank.hgs/1700b00/3688334/139944818_l.jpg"rel="lyteshow[frank-test2]"title="<i>Frank的雜記</i>"><img src="http://7.share.photo.xuite.net/frank.hgs/1700b00/3688334/139944818_t.jpg"border="0"title="點擊看圖" alt="http://7.share.photo.xuite.net/frank.hgs/1700b00/3688334/139944818_t.jpg"></a>
<a target="_blank" href="http://7.share.photo.xuite.net/frank.hgs/1700b03/3688334/139944821_l.jpg"rel="lyteshow[frank-test2]"title="<i>Frank的雜記</i>"><img src="http://7.share.photo.xuite.net/frank.hgs/1700b03/3688334/139944821_t.jpg"border="0"title="點擊看圖" alt="http://7.share.photo.xuite.net/frank.hgs/1700b03/3688334/139944821_t.jpg"></a>
<a target="_blank" href="http://7.share.photo.xuite.net/frank.hgs/1700b06/3688334/139944824_l.jpg"rel="lyteshow[frank-test2]"title="<i>Frank的雜記</i>"><img src="http://7.share.photo.xuite.net/frank.hgs/1700b06/3688334/139944824_t.jpg"border="0"title="點擊看圖" alt="http://7.share.photo.xuite.net/frank.hgs/1700b06/3688334/139944824_t.jpg"></a>
<a target="_blank" href="http://7.share.photo.xuite.net/frank.hgs/1700b09/3688334/139944827_l.jpg"rel="lyteshow[frank-test2]"title="<i>Frank的雜記</i>"><img src="http://7.share.photo.xuite.net/frank.hgs/1700b09/3688334/139944827_t.jpg"border="0"title="點擊看圖" alt="http://7.share.photo.xuite.net/frank.hgs/1700b09/3688334/139944827_t.jpg"></a>

網頁嵌入示範-HTML Content Example(rel="lyteframe[***]")

<a href="http://www.google.com" rel="lyteframe" title="Search Google"rev="width: 400px; height: 300px; scrolling: no;">Google Search</a>
<a href="catalog1.htm" rel="lyteframe[catalog]" title="Summer Catalog">Summer Catalog</a>
<a href="catalog1.htm" rel="lyteframe[catalog]" title="Winter Catalog">Winter Catalog</a>

Frank 實際示範:

嵌入單一網頁:

Search Google!

嵌入群組網頁:

M31 - Andromeda Galaxy
M42 - Orion Nebula

寫法:

<a target="_blank" href="http://www.google.com/">Search Google!</a><a target="_blank" href="http://www.google.com/" rel="lyteframe" title="開啟特效視窗-Search Google!<br/><i>Frank的雜記</i>"
   rev="width: 970px; height: 550px;"><img src="http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/13.png" title="點擊開啟特效視窗" alt="開啟特效視窗"border="0"/></a>

<br/><br/>

<a target="_blank" href="http://www.solstation.com/x-objects/andromeda.htm">M31 - Andromeda Galaxy</a><a target="_blank" href="http://www.solstation.com/x-objects/andromeda.htm" rel="lyteframe[HGS1]" title="開啟特效視窗-M31 - Andromeda Galaxy<br/><i>Frank的雜記</i>"
   rev="width: 970px; height: 550px;"><img src="http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/13.png" title="點擊開啟特效視窗" alt="開啟特效視窗"border="0"/></a>

<br/>

<a target="_blank" href="http://www.spacetelescope.org/news/html/heic0601.html">M42 - Orion Nebula</a><a target="_blank" href="http://www.spacetelescope.org/news/html/heic0601.html" rel="lyteframe[HGS1]" title="開啟特效視窗-M42 - Orion Nebula<br/><i>Frank的雜記</i>"
   rev="width: 970px; height: 550px;"><img src="http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/13.png" title="點擊開啟特效視窗" alt="開啟特效視窗"border="0"/></a>

new!!

Google 地圖(街景)嵌入示範:(rel="lyteframe[***]")

例一

(超連結+嵌入視窗+嵌入街景)

在 Google 地圖中檢視

寫法:

<a href="http://maps.google.com.tw/maps?cbp=12,338.97,,0,-0.71&cbll=25.032914,121.564886&ll=25.032914,121.564886&layer=c">在 Google 地圖中檢視</a> <a href="http://maps.google.com.tw/maps?cbp=12,338.97,,0,-0.71&cbll=25.032914,121.564886&ll=25.032914,121.564886&layer=c" rel="lyteframe[gsv]" title="地圖預覽視窗:Google 地圖<br></a><i>Frank的雜記</i>" rev="width: 970px; height: 500px;"><img src="http://frankhgs.googlepages.com/iframes1.png" title="在視窗檢視 Google 地圖" alt="在視窗檢視 Google 地圖" border="0" /></a> <a href="http://maps.google.com.tw/maps/sv?cbp=12,338.97,,0,-0.71&cbll=25.032914,121.564886&v=1&panoid=LV-4HkiO_cO6M0VfM3A2QQ&gl=&hl=zh-TW" rel="lyteframe[gsv]" title="地圖嵌入視窗:Google 地圖<br></a><i>Frank的雜記</i>" rev="width: 970px; height: 500px;"><img src="http://frankhgs.googlepages.com/map_go.png" title="在嵌入視窗檢視 Google 地圖" alt="在嵌入視窗檢視 Google 地圖" border="0" /></a>

例二

(點圖開啟嵌入街景視窗)

寫法:

<a href="http://maps.google.com.tw/maps/sv?cbp=12,338.97,,0,-0.71&cbll=25.032914,121.564886&v=1&panoid=LV-4HkiO_cO6M0VfM3A2QQ&gl=&hl=zh-TW" rel="lyteframe[gsv2]" title="地圖嵌入視窗:Google 地圖(街景)<br/><i>Frank的雜記</i>"
rev="width: 970px; height: 500px;"><img src="http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/29075429/11.jpg" title="在嵌入視窗檢視 Google 地圖(街景)" alt="在嵌入視窗檢視 Google 地圖(街景)"border="0"/></a>

如何取得 Google 地圖(街景) 的 Lytebox 嵌入語法:

先在 Google 地圖中點擊連結>自訂和預覽內嵌地圖

圖片連結

調整好街景角度與方位!

然後複製下圖反白的連結就是囉!!

圖片連結

地圖的嵌入連結亦是相同方式!!

-新增(2009/12/7 - 下午 10:53)

影片嵌入示範:(rel="lyteframe[***]")

較新式的瀏覽器是可以支援 Lytebox 影片嵌入的

Frank 實際示範:

在 YouTube - Storm Tracking with Google Earth 中檢視

寫法:

<a href="http://www.youtube.com/watch?v=2C8IIzFY-oM&feature=player_embedded">在 YouTube - Storm Tracking with Google Earth 中檢視</a> <a href="http://www.youtube.com/watch?v=2C8IIzFY-oM&feature=player_embedded" rel="lyteframe[HGSv]" title="影片預覽視窗:YouTube - Storm Tracking with Google Earth<br/><i>Frank的雜記</i>" rev="width: 970px; height: 500px;"><img src="http://frankhgs.googlepages.com/iframes1.png" title="在視窗檢視 YouTube - Storm Tracking with Google Earth" alt="在視窗檢視 YouTube - Storm Tracking with Google Earth" border="0" /></a> <a href="http://www.youtube.com/v/2C8IIzFY-oM&hl=zh_TW&fs=1&rel=0&border=1" rel="lyteframe[HGSv]" title="影片嵌入視窗:YouTube - Storm Tracking with Google Earth<br/><i>Frank的雜記</i>" rev="width: 970px; height: 500px;"><img src="http://frankhgs.googlepages.com/map_go.png" title="在嵌入視窗檢視 YouTube - Storm Tracking with Google Earth" alt="在嵌入視窗檢視 YouTube - Storm Tracking with Google Earth" border="0" /></a>

如何取得 YouTube 的 Lytebox 嵌入語法:

複製嵌入語法先

貼於記事本上

然後再將第一段"http://..."內的連結複製下來就是囉!!

此功能在 IE 上可能無法正常顯示!!

這部分寫到這裡先!!

其餘功能應用日後補齊!!

四.功能設定

整個 lytebox 功能設定都在 lytebox.js 裡的前段!!

請見下方原文設定:

Lytebox Configurable Options

Frank 在這裡稍作說明:

/*** Start Global Configuration ***/

主題顏色:預設為 grey(灰白)
this.theme = 'grey'; // themes: grey (default), red, green, blue, gold

隱藏 Flash :啟動時是否要隱藏頁面上其他的 Flash 動畫預設為 true(開啟)
this.hideFlash = true; // controls whether or not Flash objects should be hidden

框線:是否增加外框線預設為 false(關閉)
this.outerBorder = false; // controls whether to show the outer grey (or theme) border

調整圖片大小速度:預設為 8 (1=慢,10=快)(此設定變化 Frank 好像沒察覺!?)
this.resizeSpeed = 8; // controls the speed of the image resizing (1=slowest and 10=fastest)

背景透明度:預設為 80 (數值越高背景越暗)
this.maxOpacity = 80; // higher opacity = darker overlay, lower opacity = lighter overlay

上下頁:預設為 1 (1=圖片有上下頁按鈕,2=在圖片下方有上下頁文字連結)
this.navType = 1; // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number

自動調整圖片大小:預設為 true(開啟)
this.autoResize = true; // controls whether or not images should be resized if larger than the browser window dimensions

動態展示:預設為 true(開啟)
this.doAnimations = true; // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.

框線大小:預設為 12
this.borderSize = 12; // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone...

/*** End Global Configuration ***/

/*** Configure Slideshow Options ***/

幻燈片播放速度:預設為 10000=10秒
this.slideInterval = 10000; // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds)