Lytebox - 不需其他 library 即可獨立執行的相片瀏覽框 Lytebox, Lightbox

wmh

Lytebox v3.22
http://dolem.com/lytebox/
由 Lightbox 改寫的相片瀏覽框，不需要 prototype.js 和 scriptaculous 即可獨立執行，還有很多新增的好用功能喔！

先睹為快

單一張相片的展示：


相片群組：


也可以做自動展示的幻燈片效果：


也可以用 iframe 開啟另一個網頁：
Google Search


使用方式

下載 Lytebox v3.22 後，將 js 和 css 引用進來。

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

接著在你的 html 內指定正確的屬性，Lytebox 會自動找出要添加的項目及效果

以下是單一張相片的範例，主要是 rel="lytebox" 這段屬性，表示要透過程式添加點選後放大顯示的效果。

<a href="s800_P3160018.JPG" rel="lytebox" title="老爸種的草莓，看起來鮮嫩多汁喔">
<img src="s144_P3160018.JPG" /></a>

以下是相片群組的範例，主要是 rel="lytebox[flowers]" 這段屬性，方括號內的 flowers 表示這幾張相片是同一個群組，放大顯示後可以有前一張和下一張的連結。

<a href="s800_P3160016.JPG" rel="lytebox[flowers]" title="紫色小花"><img src="s144_P3160016.JPG" /></a>
<a href="s800_P3160024.JPG" rel="lytebox[flowers]" title="白色小花"><img src="s144_P3160024.JPG" /></a>
<a href="s800_P3160030.JPG" rel="lytebox[flowers]" title="黃色小花"><img src="s144_P3160030.JPG" /></a>

以下是自動展示幻燈片的範例，和上一個範例類似，但注意屬性變成了 rel="lyteshow[vacation]"，lyteshow 會呈現自動播放的效果：

<a href="s800_P1010355.JPG" rel="lyteshow[vacation]" title="東海岸風光 - 日出東方"><img src="s144_P1010355.JPG" /></a>
<a href="s800_P1010401.JPG" rel="lyteshow[vacation]" title="東海岸風光 - 野花雜草"><img src="s144_P1010401.JPG" /></a>
<a href="s800_P1010536.JPG" rel="lyteshow[vacation]" title="東海岸風光 - 長喙天蛾"><img src="s144_P1010536.JPG" /></a>

最後，如果你需要用 Lytebox 開啟另一個網頁，可以這樣用：

<a href="http://www.google.com" rel="lyteframe" title="Search Google" rev="width: 800px; height: 500px; scrolling: no;">Google Search</a>

wmh

這類的展示特效通常都是置中的沒錯。

你可以用 Firebug 之類的軟體觀察，以你提供的 litebox 來說，他是先用一層 div 叫 lightbox 這邊控制上邊界，再包一層 div 控制置中，因此你只要把置中的這個 div 調整一下即可。

置左，原本是 margin: 0 auto，改為：

#outerImageContainer {
  margin: 0;
}
#imageDataContainer {
  margin: 0;
}

如果要置右的話，postion 原本是 relative 要改成 absolute，再把 right 設成 0。

大致是這樣，不過不確定是否特效都會很完美，畢竟原本設計是置中的。

wmh

哦，我猜是因為靠右的話，相片變成 absolute 的排版後沒有佔位置，所以負責控制的那一行就跑上去了，應該是這樣～～

所以如果要靠右的話，那麼可能連那一行的位置都要跟著調整。你有網址可以讓我直接看目前的成果嗎？

wmh

ok, 我重新看了一次，有了新的想法，之前的 CSS 可先忘記。直接使用以下方式吧：

#lightbox {
  left: auto; /* 原本是 0 */
  width: auto; /* 原本是 100% */
  right: 0; /* 這樣就靠右了 */
}

wmh

喔，因為我是直接在 client 端用 Firefox 改的，所以只調整了最後的結果。

lightbox 的 js 會去修改 element 的屬性，所以如果要靠右的話，得調整一下程式。

lightbox.js 第 233 行：

this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();

改為：

this.lightbox.setStyle({ top: lightboxTop + 'px'}).show();

wmh

嗯，我知道原因了，因為 IE6,7 給 width auto 時，是 100%

你可以試著改一下程式，在 outerImageContainer 改變寬度時，一起改變 lightbox 的寬度，應該可以解決。

wmh

原帖由 bau720123 於 2009-4-22 11:42 發表
謝謝您的回覆
根據您的提示我嘗試自己依樣畫葫蘆改了lightbox.js的某個地方
在原167行
$('outerImageContainer').setStyle({ width: size, height: size });

底下再插入
$('lightbox').setStyle({ width: size, hei ...

嗯，我覺得不是改這個地方喔，你可以找有動畫效果的地方修改。

wmh

原本有一段是：

if (wDiff != 0) ...

這邊幫 lightbox 加上相同的效果即可：

if (wDiff != 0) {
  new Effect.Scale(this.outerImageContainer, ......);
  $('lightbox').setStyle({ width: widthNew});
}

wmh

有實際範例可以看嗎？

wmh

從我這邊瀏覽時，速度非常慢，應該是造成你說得問題的原因。因為網頁還沒 load 完，所以程式還沒被套用上，所以會失效。

我等整個網頁都 load 完後再取點圖片則正常。可能要先解決速度慢的問題～