 |
| Videobox 實際執行情形 |
Videobox 是一個只有6KB大小的套件，可以讓影片連結以 Lightbox 方式顯示播放，Videobox 使用 swfobject 來嵌入 Flash 。 影片可以來自 Youtube、Metacafe、Google Video、iFilm和自己設置的Flash。
使用方法：
首先載入程式必須的檔案
//使用Google AJAX API 取得 Mootools 1.4.5 包含 YUI 的壓縮版本
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
//使用Google AJAX API 取得 swfobject 2.2 版本
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
//Videobox 的轉換主程式
<script src="js/videobox.js" type="text/javascript"></script>
再來貼上Lightbox 顯示方式的CSS 設計
body {margin: 0;}
#lbOverlay {
position: absolute;
left: 0;
width: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
left: 50%;
overflow: hidden;
background-color: #fff; text-align: center; padding: 5px;
}
.lbLoading {
background: #fff url(loading.gif) no-repeat center;
} //影片讀取中的圖片
#lbImage {
border: 10px solid #fff;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
} //上一個連結下一個連結
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: transparent url(prevlabel.gif) no-repeat 0% 15%;
}
#lbNextLink {
right: 0;
}
#lbNextLink:hover {
background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
font-family: Verdana, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 5px solid #fff;
border-top-style: none;
}
#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(closelabel.gif) no-repeat center;
margin: 5px 0;
} //關閉影片連結
#lbCaption, #lbNumber {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}
接下來在HTML部分只要在連結上加上 rel="vidbox" 就可以了
title 即為 Lightbox 的標題
<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="標題文字">our video</a>
你也可以使用 JavaScript 來創建連結
Videobox.open("你的影片連結","你的標題文字","影片寬高");
作者網站：http://videobox-lb.sourceforge.net/
檔案大小：64.5 KB
檔案下載：http://sourceforge.net/project/showfiles.php?group_id=203672
檔案備份：下載
檔案大小：64.5 KB
檔案下載：http://sourceforge.net/project/showfiles.php?group_id=203672
檔案備份：下載
0 意見