YoxView 網頁內容展示視窗

YoxView 是一個可以靈活訂製設定的一個圖片套件 ( Lightbox ) ，用於展示單張或多張圖片也可展示影片或者是任何的 HTML 元素。可以在一個對話框中利用向前 / 向後的按鈕或者幻燈片的方式來瀏覽圖片。YoxView 支援一個頁面放置多組不同的內容，也可單獨做設定。YoxView 還支援多種語言包含中文，可以透過語言文件訂制。可使用 jQuery 框架也可以不包含框架本身就能更直接的使用。

使用方法：
第一步 載入 YoxView 需要用到的 JavaScript 檔
<!-- 載入 YoxView 的主程式碼，包含 jQuery 框架的載入 -->
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>

注意.如果不要使用 jQuery 框架請進入到下面的這一個檔案
註解掉最後一行 讓程式初始化時不要載入
//LoadScript(yoxviewPath + "yoxview-nojquery.js");

第二步 使用 HTML 建立圖片展示的圖列
<div id="yoxview">
    <a href="img/01.jpg"><img src="img/thumbnails/01.jpg" alt="First" title="First image" /></a>
    <a href="img/02.jpg"><img src="img/thumbnails/02.jpg" alt="Second" title="Second image" /></a>
</div>

第三步 使用 JavaScript 使  YoxView 的程式起作用
$(function(){
  $("#yoxview").yoxview({
    backgroundColor: 'Blue',
    playDelay: 5000
  });
});

附上 YoxView 可修改參數表

參數	類別	預設	說明
allowedUrls	正則式	-	允許以非靜態圖片連結的範圍.例如../\/image.php\?imageId=(?:\d+)$/i
allowInternalLinks	布林	false	是否設定全為本地連結
autoHideInfo	布林	true	是否自動隱藏資訊
autoHideMenu	布林	true	是否自動隱藏選單
autoPlay	布林	false	是否自動撥放
backgroundColor	字串	'#000000'	背景透明層的顏色
backgroundOpacity	單精數	0.8	背景透明層的透明度
buttonsFadeTime	整數	500	上一頁下一頁的顯示時間單位為毫秒.設定0為永久可見
cacheBuffer	整數	5	緩存圖片數量
cacheImagesInBackground	布林	true	是否預先緩存全尺寸圖片
controlsInitialFadeTime	整數	1500	動畫的時間以毫秒為單位
controlsInitialDisplayTime	整數	1000	資訊欄顯示的時間.以毫秒為單位
dataFolder	字串	yoxviewPath+"data/"	可將此選項設置為網路相簿
defaultDimensions	物件	{flash:{width:720,height:560} ,iframe:{width:1024}}	預設影片及 HTML 內容的寬度和高度
flashVideoPlayer	字串	"jwplayer"	使用撥放器的名稱
flashVideoPlayerPath	字串	"/jwplayer/player.swf"	撥放器存放的位置
infoBackOpacity	單精數	0.5	資訊欄的背景透明度
infoBackColor	字串	'#000000'	資訊欄的背景顏色
infoButtons	物件	-	自定義按鈕訊息欄
imagesFolder	字串	yoxviewPath+"images/"	圖片的預設資料夾
isRTL	布林	false	是否使用右上到左下
lang	字串	'en'	使用的語系 繁中為 zh-tw.js 簡中為 zh-cn.js
langFolder	字串	yoxviewPath+"lang/"	語系放置的資料夾
linkToOriginalContext	布林	true	外部圖片資料是否增加信息欄的小圖標
loopPlay	布林	true	是否重複撥放
menuBackgroundColor	字串	'#000000'	選單的背景顏色
menuBackgroundOpacity	單精數	0.8	選單的透明度
playDelay	整數	3000	自動撥放的間隔時間.單位為毫秒
popupMargin	整數	20	框與邊界的距離
popupResizeTime	整數	600	換下一張圖片的轉變大小時間.以毫秒為單位
renderButtons	布林	true	是否使用上下頁按鈕.設定為false 可自定義
renderInfo	布林	true	是否使用訊息欄.設定為false 可自定義
renderInfoExternally	布林	false	是否在其他位置顯示訊息欄
renderInfoPin	布林	true	是否顯示訊息欄
renderMenu	布林	true	是否顯示選單
showBarsOnOpen	布林	true	是否顯示資訊及幫助按鈕
showButtonsOnOpen	布林	true	是否顯示上下頁
showDescription	布林	true	是否可重導入內容取得說明
skin	字串	-	套版目前僅提供 top_menu 一個套版
textLinksSelector	字串	'.yoxviewLink'	jQuery 的連結識別
thumbnailsOptions	物件	{thumbnailsClass: "yoxview_thumbnail"}	縮圖的屬性設定
titleAttribute	字串	'title'	標題內容取得的屬性
titleDisplayDuration	整數	2000	標題淡入淡出的時間.以毫秒為單位
titlePadding	整數	6	內容與框的距離

作者網站：http://www.yoxigen.com/yoxview/
檔案大小：114 KB
檔案下載：http://www.yoxigen.com/yoxview/Download.aspx
檔案備份：下載