LightWindow v2.0 的功能:

✦支援swf,各類網頁格式,PDF,內置框架,AJAX 內容,並含有畫廊分類。
✦畫廊含有分類群組,用來設定類別的畫廊支持任何字符,除了 [ ' ＆ ' ] 。
✦各種參數,可進一步自定標題,說明,作者,分類等。
✦視窗預設為垂直居中,也可以自行控制位置。
✦可在視窗提交表單,並含有動態換頁。
✦支持大部分媒體類型,自動偵測媒體來源,解決了所有video/media 的問題。
✦點擊任何位置或按ESC鍵即可關閉視窗。


支援瀏覽器:
Tested in Windows Firefox/IE6/IE7/Safari3/Opera & Mac Firefox/Safari/Opera/Netscape

下載JS、CSS和必要圖檔 放置於網頁目錄下

<HEAD>與</HEAD>之間

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

運用一: 開啟網頁用法

開啟網址網頁 ||

<a href="http://www.hsiu28.net/main/" title="OECSPACE" caption="CssStyle + JavaScript"> Website Example </a>

簡易開啟網頁 ||

<a href="blank.html">OPEN HTML</a>
視窗網頁內使用的關閉按鈕
<a href="#" rel="deactivate">Cancel</a>

運用二 : 圖檔展示

帶有主題與說明文字的視窗

<a href="img/photo4.jpg" title="TITLE" author="Candy" caption="Caption"> Image</a> 

圖檔展示(群組)

<a href="img/0.jpg" rel="subject[Category Name]" title="TITLE" caption="Caption" author="Author">image #1</a>
<a href="img/1.jpg" rel="subject[Category Name]" title="TITLE" caption="Caption" author="Author">image #2</a>
<a href="img/2.jpg" rel="subject[Category Name]" title="TITLE" caption="Caption" author="Author">image #3</a>
<a href="img/4.jpg" rel="subject[Category Name_s]" title="TITLE" caption="Caption" author="Author">image #3</a>
<a href="img/5.jpg" rel="subject[Category Name_s]" title="TITLE" caption="Caption" author="Author">image #3</a>

圖檔展示(設定一次播放兩張圖)

<a href="photo/1.jpg" rel="Photo[Name]" title="TITLE" caption="Caption" author="Candy" params="lightwindow_show_images=2">image #0</a>
<a href="photo/2.jpg" rel="Photo[Name]">image #1</a><br />
<a href="photo/3.jpg" rel="Photo[Name]" title="TITLE" caption="Caption" params="lightwindow_show_images=2">image #2</a><br />
<a href="photo/4.jpg" rel="Photo[Name]">image #3</a><br />
<a href="photo/5.jpg" rel="Photo[Name]" title="TITLE" caption="Caption" params="lightwindow_show_images=2">image #4</a><br />
<a href="photo/6.jpg" rel="Photo[Name]">image #5</a><br />

✦同一個群組名稱需相同 ,類別名稱不同又會是另一個子分類( rel="主題[類別名稱]" ),設同一個群組和子分類可用上下頁預覽。
✦若只想顯示一個連結,可用 css 的 display: none 屬性將其它連結設為隱藏。
✦一次展示兩張圖關鍵在於 params="lightwindow_show_images=2"。

運用三 : 開啟 Flash SWF

開啟單一 SWF || 

<a href="header2.swf" params="lightwindow_width=843,lightwindow_height=324" title="Preview: Doesn't your masthead look perdy?">OPEN SWF</a>

Flash swf(群組)

<a href="gallery/header.swf" rel="Flash Gallery[Headers]" params="lightwindow_width=800,lightwindow_height=345" title="Gallery:" author="Einstein Industries"> Header #1 </a>
<a href="gallery/header2.swf" rel="Flash Gallery[Headers]" params="lightwindow_width=843,lightwindow_height=324" title="Gallery:" author="Einstein Industries"> Header #2 </a>
<a href="gallery/header3.swf" rel="Flash Gallery[Headers]" params="lightwindow_width=769,lightwindow_height=209" title="Gallery:" author="Einstein Industries"> Header #3 </a>

✦同一個群組名稱需相同 ,類別名稱不同又會是另一個子分類群組( rel="主題[類別名稱]" ),設同一個群組和子分類群組可用上下頁預覽。
✦若只想顯示一個連結,可用 css 的 display: none 屬性將其它連結設為隱藏。

Flash Paper || 

<a href="gallery/frontdoor_doc.swf" params="lightwindow_iframe_embed=true" title="Flash Paper"> Flash Paper - The RIGHT way to embed a PDF!</a> 

運用四 : 內置框架用法

以下程式請使用在內置框架的頁面網頁

<HEAD>與</HEAD>之間

<script type="text/javascript" src="javascript/prototype.js"></script>

<BODY>與</BODY>之間

<a href="http://www.hsiu28.net/main/" params="lightwindow_type=external"> Open </a>
<script type="text/javascript">
var links = $$('.lightwindow_iframe_link');
links.each(function(link) {
Event.observe(link, 'click', function() {parent.myLightWindow.activate(null, link);}, false);
link.onclick = function() {return false;};
});
</script>

運用五 : 表單提交內容

<a href="js/lightwindow/form.html" params="lightwindow_width=175,lightwindow_height=60" class="lightwindow">Form Example</a>
下載範例

運用六 : 開啟符合寬度的網頁

<a href="blank.html">Example_2</a> || <a href="blank-width.html">Example_3</a> 

✦以上是載入 html 網頁,載入的網頁只需要內容,內容會與你網頁中的 css 對應,例如(你網頁的文字是10xp,開啟的 html 文字也會是10px)。
✦被載入的網頁 <div id="ipsum" style="width:750px"> 內容 </div>開啟的視窗則會是寬 750px。下載範例✦如果要將開啟頁設為外部檔案,請加上參數 params="lightwindow_type=external"

運用七 : 媒體 Movies ,PDF

開啟 Movie ||

<a href="http://images.apple.com/movies/newline/the_number_23/the_number_23-tlr1_h.640.mov" params="lightwindow_width=640,lightwindow_height=290" >Example Movies</a>

開啟 PDF || 

<a href="http://www.ready.gov/business/_downloads/sampleplan.pdf">Example PDF</a>

You Tube 影片 || 

<a href="http://www.youtube.com/v/uhi5x7V3WXE"
params="lightwindow_width=425,lightwindow_height=340,
lightwindow_loading_animation=false" title="YouTube: 300 Preview">You Tube Preview</a>

✦left: 300 控制視窗位置,不需要可刪除

LightWindow 參數說明

以下參數依需求自行增減, 如果他們都是不存在的數據框中將不會顯示。
也可以添加一個參數屬性在超鏈接標籤, 改變高度,寬度,一些圖片顯示,說明如下。
連結參數說明 :

✦rel="分類主題[名稱]"
✦title="視窗上方的主題"
✦caption="視窗下方內的說明文字"
✦author="作者名稱"

params參數說明:

✦lightwindow_width // 視窗寬度
✦lightwindow_height // 視窗高度

    params="lightwindow_width=175,lightwindow_height=60"

✦lightwindow_top // 設置由上為基準取視窗位置
✦lightwindow_left // 設置由左為基準取視窗位置

    params="lightwindow_top=200,lightwindow_left=300"

✦lightwindow_show_images // 設置畫廊一次要展示的數量,默認為1

    params="lightwindow_show_images=2"

✦lightwindow_type // 指定視窗類型,external, image, media, inline

    例如 : 將開啟頁定為外部檔案 params="lightwindow_type=external"

✦lightwindow_loading_animation // 設置為false,選擇沒有淡出動畫
✦lightwindow_iframe_embed // 嵌入媒體到框架
✦lightwindow_form // 表單傳遞資料


✦作者網站 : stickmanlabs || LightWindow v2.0

arrow
arrow
    全站熱搜

    Bonnie✦ 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄