在blogger上使用Lightbox
Lightbox 2使用了Prototype Framework和Scriptaculous Effects Library
透過內嵌的 .js(JavaScript)和.css 達成圖片顯示的特效
這對會在blog上發表有照片的文章的部落客相當有幫助
因為只要點一下在文章中長寬受限的圖就能顯示完整的原始圖片了
首先先展示一下Lightbox 2實際運作的效果
點下圖片後應該就能感受到Lightbox 2的魅力了
如果沒辦法看到Demo請直接連結至Lightbox 2網頁觀看
要在blog上使用Lightbox 2的效果有兩個步驟
第一是要在blog本身的html中內嵌語法
以blogger來說先到 Lightbox 2下載最新的 zip檔後解壓縮
將 css、image、js資料夾上傳至自己的網路空間
上傳完後再到版面配置中的修改html
在<head>和</head>之間加入類似以下的語法
而你的網路空間的部分
若是自己架的blog可以使用相對路徑(相對於網頁)
在blogger之中必須是可以連結到的 http 網址
另外在blogger還必須修改解壓縮出來js資料夾中 lightbox.js 的這兩行
fileLoadingImage: '你的網路空間/images/loading.gif',
fileBottomNavCloseImage: '你的網路空間/images/closelabel.gif',
這個檔案中也有其他一些設定可以更改，可以照他的註解設定
記得改完後要再上傳一次喔
設定完blog中的html後就可以使用了
只要在新發表的文章中加入這樣的語法就可以有上面Demo的效果了
<a href="大圖連結" rel="lightbox" title="說明文字">小圖連結</a>
一樣若在這的Demo失效可以回Lightbox 2去看
以上就是 Lightbox 的簡單介紹
網路上還有許多類似 Lightbox 的東西且功能更強大
譬如說可以使用iframe的Lytebox可以嵌入flash和影片的ThickBox
FancyBox 則有 iframe、inline 功能
目前看到最完整的是 LightView 上面提到的功能全包了
和這些比起來 Lightbox 就只是很單純的顯示圖片了
關鍵字：blogger, blogspot, Lightbox, Lytebox, ThickBox, FancyBox, LightView
透過內嵌的 .js(JavaScript)和.css 達成圖片顯示的特效
這對會在blog上發表有照片的文章的部落客相當有幫助
因為只要點一下在文章中長寬受限的圖就能顯示完整的原始圖片了
首先先展示一下Lightbox 2實際運作的效果
點下圖片後應該就能感受到Lightbox 2的魅力了
如果沒辦法看到Demo請直接連結至Lightbox 2網頁觀看
要在blog上使用Lightbox 2的效果有兩個步驟
第一是要在blog本身的html中內嵌語法
以blogger來說先到 Lightbox 2下載最新的 zip檔後解壓縮
將 css、image、js資料夾上傳至自己的網路空間
上傳完後再到版面配置中的修改html
在<head>和</head>之間加入類似以下的語法
<!-- /************************ LightBox **************************/ //-->其中淺藍色的地方是註解，方便以後修改用
<link href='你的網路空間/css/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='你的網路空間/js/prototype.js' type='text/javascript'/>
<script src='你的網路空間/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='你的網路空間/js/lightbox.js' type='text/javascript'/>
<!-- /************************* End LightBox *********************/ //-->
而你的網路空間的部分
若是自己架的blog可以使用相對路徑(相對於網頁)
在blogger之中必須是可以連結到的 http 網址
另外在blogger還必須修改解壓縮出來js資料夾中 lightbox.js 的這兩行
fileLoadingImage: '你的網路空間/images/loading.gif',
fileBottomNavCloseImage: '你的網路空間/images/closelabel.gif',
這個檔案中也有其他一些設定可以更改，可以照他的註解設定
記得改完後要再上傳一次喔
設定完blog中的html後就可以使用了
只要在新發表的文章中加入這樣的語法就可以有上面Demo的效果了
<a href="大圖連結" rel="lightbox" title="說明文字">小圖連結</a>
另外他也支援類似相簿的功能這也來個小小的Demo好了
只要在網頁上有相同相簿名稱的連結都能一起瀏覽
點下第一張圖後在圖片的右半邊點滑鼠就能直接往下一張
同樣的在圖片左半邊點滑鼠就能往前一張
<a href="大圖1連結" rel="lightbox[相簿名]">小圖連結1</a>
<a href="大圖2連結" rel="lightbox[相簿名]">小圖連結2</a>
<a href="大圖3連結" rel="lightbox[相簿名]">小圖連結3</a>
一樣若在這的Demo失效可以回Lightbox 2去看
以上就是 Lightbox 的簡單介紹
網路上還有許多類似 Lightbox 的東西且功能更強大
譬如說可以使用iframe的Lytebox可以嵌入flash和影片的ThickBox
FancyBox 則有 iframe、inline 功能
目前看到最完整的是 LightView 上面提到的功能全包了
和這些比起來 Lightbox 就只是很單純的顯示圖片了
關鍵字：blogger, blogspot, Lightbox, Lytebox, ThickBox, FancyBox, LightView
留言
張貼留言