Lytebox in Blogger

2008/12/31

0 篇留言

讀大學時接了一個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與圖檔)
  1. 下載 Download Lytebox v3.22

  2. 更新 lytebox.css 圖檔連結 (使用「取代」功能將連結批次更新)

  3. 在<head>....</head> 內加上下列程式 (記得更檔案位址)
    <script type="text/javascript" language="javascript" src="lytebox.js"≶</script≶
    <link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" /≶

  4. 選擇你要的類型
    單一圖檔
    <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>

  5. 打完收工

參考來源：Lytebox Home

posted by： frank 11:05

0 篇留言:

我有話要說

訂閱： 張貼留言 (Atom)