2009年1月7日

在blogger上使用Lightbox


 
Lightbox 2使用了Prototype FrameworkScriptaculous 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>之間加入類似以下的語法
<!-- /************************  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>
另外他也支援類似相簿的功能
只要在網頁上有相同相簿名稱的連結都能一起瀏覽
點下第一張圖後在圖片的右半邊點滑鼠就能直接往下一張
同樣的在圖片左半邊點滑鼠就能往前一張
<a
href="大圖1連結" rel="lightbox[相簿名]">小圖連結1</a>
<a href="大圖2連結" rel="lightbox[相簿名]">小圖連結2</a>
<a href="大圖3連結" rel="lightbox[相簿名]">小圖連結3</a>
這也來個小小的Demo好了
一樣若在這的Demo失效可以回Lightbox 2去看





以上就是 Lightbox 的簡單介紹
網路上還有許多類似 Lightbox 的東西且功能更強大
譬如說可以使用iframe的Lytebox可以嵌入flash和影片的ThickBox
FancyBox 則有 iframe、inline 功能
目前看到最完整的是 LightView 上面提到的功能全包了
和這些比起來 Lightbox 就只是很單純的顯示圖片了

關鍵字:blogger, blogspot, Lightbox, Lytebox, ThickBox, FancyBox, LightView


更多精選推薦文章

0 意見 :