讀大學時接了一個Case，有一部分是要把照片以相簿方式呈現，再搭上一些CSS語法讓版面視覺效果整齊畫一，只是有個地方一直覺的不符合UI。每點一張小圖，網頁即連結到大圖頁面，使用者必須再按上一頁才回主頁繼續瀏覽，重複這些動作無形中會造成使用者不便，停留時間減少，跳出率增高。
那時每天都會固定逛 wowbox，在JS區被找到一篇 Lightbox JS v2.0 一款很酷的UI ，哈~~這 正是解決這個問題的好方法。Lightbox乃是 JavaScript運用CSS的Overlay，在同一頁面展示大張圖片，淡化原有背景，使焦點都放在圖片上。但...今天的主角可不是Lightbox嘿，而是 Lytebox v3.2
The Lightbox Clones Matri
從上圖可得知兩者差在哪，簡單說 Lytebox 比起Lightbox 廋多了，一個170k，一個40k根本是懶叫比雞腿嘛，再來，Lytebox 支援 iframes與投影片模式，lightbox 什麼都沒有，那輸贏可想而知，Lytebox V3.2 .....大勝!!
光說不練怎麼行，Demo 一下 (lx3 隨手拍)
無痛安裝教學 (我是都把檔案上傳到 googlepage，含 css、js與圖檔)
<script type="text/javascript" language="javascript" src="lytebox.js"≶</script≶
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" /≶
單一圖檔<a href="images/image-1.jpg" rel="lytebox" title="Image Description">Image #1</a>
多張圖檔群組顯示<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>
投影片群組顯示<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>
iframes<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>
2008/12/31
| [+/-] |
Lytebox in Blogger |
2008/12/27
| [+/-] |
「繼續閱讀功能」加上淡入淡出 effects |
kaie's blog 繼續閱讀功能不需要重新載入新的頁面，直接就打開來...反應速度更快，閱讀完畢又可摺回，再加上這個特效，如虎添翼，方便又好用 。
1 . 把下列程式碼加至 /head 之前。，讓 prototype.js 、scriptaculous.js 預先載入，peekaboo_bgcolor = '#ffffff' 顏色代碼改為你背景色，不然 IE 會看不到特效 (預設是白色) <script type='text/javascript' src=
'http://anniyalogam.com/scriptaculous/src/prototype.js'/ >
<script type='text/javascript' src=
'http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=effects'/ >
<script type='text/javascript' >
var fade = true;
var peekaboo_bgcolor = '#ffffff';
</script >
2. 把kaie's blog 繼續閱讀功能裡的這段代碼，紅色的部份刪除掉即可。<div class='post-body' >
<b:if cond='data:blog.pageType == "item"' >
<p> <data:post.body/ > </p >
<b:else/>
<style >#fullpost {display:none;} </style >
<p> <data:post.body/ > </p >
在貼HTML code時要注意一下，括號會被browser當作tag讀掉，所以如果要貼括號的話，要用下列的字元更換！
< 用 < 更換
> 用 > 更換
& 用 &更換
2008/12/23
| [+/-] |
移除或自動隱藏 Blogger 導覽列 (navbar) |
上圖中 Blogger navbar，看了真礙眼，因該沒什麼人會用它來搜尋其他blog，唯一的優點就是「Login」的功能，但 Login 往後我們可以自訂連結，只要加兩三行 code，就讓它從您的眼前消失
1.完全隱藏
在 <head>.... </head>間，加入以下程式碼： <style type='text/css'>
.Navbar {visibility:hidden;display:none;}
</style>
2.自動隱藏
另一個方法就是讓 navbar 具有自動隱藏的效果，可以用濾鏡的方式，不過目前自動隱藏的效果只適用在 Firefox，在 ie 下的效果是隱形並非移除，但滑鼠向右上角上移時，仍可以點到登入 blogger 的連結。
在 前，加入以下程式碼：#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
建議：修改 HTML 時，可先把所有 code 先 copy 到記事本作編輯，完成後再覆蓋回去。
2008/12/22
| [+/-] |
更換樣版 - Kubrick on Blogspot |
很久之前就想開始寫 Blog，大概在................很久以前了 ，我也想不起了，直到現在我才開始動手，真的託了好久，市面上提供不少免費 Blog 讓人選擇，如:Yahoo、Xuite、無名、pixnet、Blogger、樂多；在爬完 PTT Blog版與Google大神之後，「Blogger」 所提供的服務最受我青睞。
會選 Blogger 來當 blog 有幾項因素
- 網路上提供了不少 templates 可以選擇，且可自行定義Template樣版
- 簡潔、沒有廣告 (科科，「廣告」當然自已放，自已賺)
- 我就是愛 Google Support
- 穩定、速度快，最重要的是「自由度」高
- 依自已的 Style，從無到有的打造 (Blogger Hack)
B templates 、 geckoandfly 這兩個網站裡面有很多有趣的樣版，如:Iphone、Wordpress、yahoo、google、msn，一逛上去就欲罷不能，一口氣抓了十幾二十個 templates，個人比較偏好「素色」的版面，最終決定了 Kubrick。
Kubrick 是 Wordpress 1.5 的預設 theme，版面乾淨、邊框加上陰影特效更具有立體感，Suprise 的是，這個樣版是 kaie 大大製作，想不到大大除了寫 blogger hack ，也有製作 template。
更換 Blogger 版面前特別要注意一點，記得「備份widget」，不然....嘿，一上傳 xml 就真的欲哭無淚；更換程序為「備份，套用，還原」，詳細過程可參考海芋小站提供的教學[Blogger] 套用樣版大絕招。
欲瞭解更多有關 Kaie template 請到這 Kaie's Blog: [Template] Kubrick style for Blogger beta
安裝過程，這邊我簡單以圖文方式作個教學
1.先到 B templates 抓一個你喜歡的面版
2.檢查檔案 xml 裡的圖片連結是否還存在，避免安裝後顯示不完全
很巧的，我抓的這一個，圖片連結剛好斷掉
只好...嘿嘿，借用 Kaie 大大自家的圖片
把上圖反白網域改為如下
原始:
http://chenkaie.googlepages.com/kubrickbgcolor.jpg更改為:
http://bloggerhacks.googlecode.com/files/kubrickbgcolor.jpg記得，用「全部取代」功能更新頁面上所有的連結
3.最後再到 設定->修改HTML->上傳xml 。
4. 大功告成
2008/12/18
| [+/-] |
LX3：「我終於回家了」 |
昨天和好友們一起前往台中資訊展
難得前往台中，怎麼可以沒順手帶個伴手禮回家呢
只是這個伴手禮還真不是普通的貴
就是這個...
LX3爸爸終於帶你回家了。
昨天是資訊展最後一天，也許可以撿到便宜貨，順便撈一些贈品回家。
會場裡，Nikon、Canon、Sony 攤位攏係狼呀
找呀找呀，奇怪，怎沒看到Panasnoic 呢..
啃~~怎麼會在角落邊，沒幾隻貓在顧攤，也沒什麼顧客，大廠的氣派呢??
站在展示機櫃前，也沒人來招待，感覺真差...
過了許久，自已走進去問了他們員工有沒有實機可看
員工:「沒有實機喔，需要我幫你訂嗎」，一聽到沒實機，我就走人了
之前就有先對 LX3 作功課，心裡能接受的價格區間已有個底，只要不太離譜都能接受 ，想到上次在 Mobile01 有人推薦台中雙十路「中野數位專攝影專賣店」，順路繞過就去看看，還未踏入門口就看到裡面都是人，進去後詢問個價錢店員開價 $15800，含8G(class6)、原廠皮套、小腳架、清潔組、副廠電池(日芯)、讀卡機、保護貼。聽到這個價錢與贈品，大腦已開始對我洗腦，「就是這一家，別懷疑了，買下去，買下去...」，最終...還是走出門口，手上拿著一個袋子，開心的往返南投..
去資訊展，重點就是 ShowGirl，其中ASUS 展示 epc 的 SG 最正...
客倌們趕緊來看喔...
好正呀........
買 EeePC有送正妹，我一定帶回家...
