12 3 下一頁

wmh

Rank: 9 Rank: 9 Rank: 9

帖子: 763
主題: 210
精華: 2
積分: 232
威望: 232
金錢: 0

1^# 跳轉到 » 正序看帖

打印

字體大小: tT

發表於 2008-9-28 21:51 | 只看該作者

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

Lytebox, Lightbox

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>

To infinity and beyond!

sy0921639035

新手上路

Rank: 1

帖子: 3
主題: 0
精華: 0
積分: 3
威望: 0
金錢: 1

25^#

發表於 2010-8-20 11:53 | 只看該作者

本帖最後由 sy0921639035 於 2010-8-20 12:46 編輯

以解決囉= ="
原來放在
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="/lytebox.css" rel="stylesheet" type="text/css" />

<script src="/lytebox.js" type="text/javascript"></script>
</asp:Content>
這邊就可以了= ="

小弟發現他特效展開的時間好像很長= ="
請問可以改嗎??

TOP

sy0921639035

新手上路

Rank: 1

帖子: 3
主題: 0
精華: 0
積分: 3
威望: 0
金錢: 1

24^#

發表於 2010-8-20 11:40 | 只看該作者

板大您好!!
小弟使用這個元件在一般的新增網頁下執行都沒有問題!!
可是如果使用MasterPage來當作主要面板的話
<link rel="stylesheet" href="lytebox.css" type="text/css" />
<script type="text/javascript" src="lytebox.js"></script>
這兩行似乎是放在哪邊都沒會有效果的樣子呢= ="
請問該怎麼解決呢???

TOP

wmh