jquery的相冊插件yoxview，功能非常強大，用戶體驗非常好，而且可以使用鍵盤來控制圖片的播放，而且官方還提供中文的支持，使用起來也相當簡單。
官方地址：http://www.yoxigen.com/yoxview/
使用實例：http://www.dh189.com/h/93_1.html (點擊相冊即可看到效果)
下載地址：http://www.yoxigen.com/yoxview/releases/1.98/jquery.yoxview-1.98.zip
截圖如下：
開始使用：
1.導入jquery包
<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>2.導入yoxview的init包
<script type="text/javascript" src="scripts/yoxview/yoxview-init.js"></script>說明：
在yoxview-init.js中是這樣實現的：
var _yoxviewPath = getYoxviewPath();
var cssLink = parent.document.createElement("link");
cssLink.setAttribute("rel", "Stylesheet");
cssLink.setAttribute("type", "text/css");
cssLink.setAttribute("href", _yoxviewPath + "yoxview.css");
parent.document.getElementsByTagName("head")[0].appendChild(cssLink);
function LoadScript( url )
{
document.write( '<scr' + 'ipt type="text/javascript" src="' + url + '"><\/scr' + 'ipt>' ) ;
}
var jQueryIsLoaded = typeof jQuery != "undefined";
if (!jQueryIsLoaded)
LoadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
if (!jQueryIsLoaded || !jQuery().jsonp)
LoadScript(_yoxviewPath + "jquery.jsonp-1.0.4.min.js");
if (!jQueryIsLoaded || !jQuery().everyTime)
LoadScript(_yoxviewPath + "jquery.timers-1.2.min.js");
if (typeof Yox == "undefined")
LoadScript(_yoxviewPath + "yox.min.js");
if (!jQueryIsLoaded || !jQuery().yoxthumbs)
LoadScript(_yoxviewPath + "jquery.yoxthumbs.min.js");
LoadScript(_yoxviewPath + "jquery.yoxview-1.98.min.js");
function getYoxviewPath()
{
var scripts = document.getElementsByTagName("script");
var regex = /(.*\/)yoxview-init\.js/i;
for(var i=0; i<scripts.length; i++)
{
var currentScriptSrc = scripts[i].src;
if (currentScriptSrc.match(regex))
return currentScriptSrc.match(regex)[1];
}
return null;
}
也就是說這樣導入init.js就不需要導入其他的js包括css，因爲它自動回判斷是否導入自己所依賴的js，（需要注意的是init.js的文件目錄要和其他文件是同一個目錄，也就是這個目錄結構就是下載的目錄結果，自己不要去改變它）如果你不喜歡這樣的引入，也可以如下引入：
<link rel="Stylesheet" type="text/css" href="scripts/yoxview/yoxview.css">
<script type="text/javascript" src="scripts/yoxview/jquery.jsonp-1.0.4.min.js"></script>
<script type="text/javascript" src="scripts/yoxview/jquery.timers-1.2.min.js"></script>
<script type="text/javascript" src="scripts/yoxview/yox.min.js"></script>
<script type="text/javascript" src="scripts/yoxview/jquery.yoxthumbs.min.js"></script>
<script type="text/javascript" src="scripts/yoxview/jquery.yoxview-1.98.min.js"></script>還有需要注意的一點就是，在做測試的時候一定放到服務器上（tomcat、Apache、IIS），如果不在服務器上測試在火狐或谷歌瀏覽器上看不出效果。
調用如下(相冊)：
$("#my_yw").yoxview({
images: [{"media":{"title":"","src":"http://www.xierongsheng.com/home/attachment/201004/22/2_1271908559mm8P.jpg"}}],
lang : 'zh-cn',
autoPlay:true
});
單個圖片調用如下：
<div id="test">
<a href="images/large/01.jpg"><img src="images/thumbnails/01.jpg" alt="First" title="The first image" /></a>
<a href="images/large/02.jpg"><img src="images/thumbnails/02.jpg" alt="First" title="The SECOND image" /></a>
<a href="images/large/03.jpg"><img src="images/thumbnails/03.jpg" alt="First" title="The THIRD image" /></a>
</div>
$("#test").yoxview({
lang : 'zh-cn',
autoPlay:true
});
yoxview的參數如下：
| Option name | Type | Default value | Description |
|---|---|---|---|
| autoHideInfo | Boolean | true | If set to false, the info bar (with image count and title) is always displayed. |
| autoHideMenu | Boolean | true | If set to false, the menu bar is always displayed. |
| autoPlay | Boolean | false | If true, slideshow mode starts when the popup opens. |
| backgroundColor | String / color | '#000' | The color used to shade the website when the viewer's popup is on display. Can take any valid CSS color value ("#ddd", "#5d89ad", "Blue", etc.) |
| backgroundOpacity | Float, 0-1 | 0.8 | The opacity of the background used to shade the website. Values can be between 0 and 1. |
| buttonsFadeTime | Number | 500 | The time in milliseconds to show the viewer's buttons when it's opened. Setting this to 0 forces "Next" and "Prev" buttons to remain visible. |
| cacheBuffer | Number | 5 | The number of images to cache ahead of the current image (directional, depends on the current viewing direction). This is the number of images that are cached before the viewer's popup is loaded, unless the option cacheImagesInBackground is set to false. If you wish to cache all the images at once, set this to 0. |
| cacheImagesInBackground | Boolean | true | If true, full-size images are cached even while the gallery hasn't been opened yet. |
| controlsInitialFadeTime | Number | 1500 | The time, in milliseconds, it takes the menu and prev/next buttons to fade in and out when the popup is opened. |
| controlsInitialDisplayTime | Number | 1000 | The time, in milliseconds, to display the menu, prev/next buttons and the info bar when the popup is opened. Set to 0 to not display them by default |
| dataFolder | String | yoxviewPath + "data/" | Plugins folder location |
| infoBackOpacity | Float, 0-1 | 0.5 | The opacity of the info bar, at the bottom of the viewer, which contains the image's title and position. Values can be between 0 and 1. |
| infoBackColor | String / color | 'Black' | The color of the info bar. Can take any valid CSS color value ("#ddd", "#5d89ad", "Blue", etc.) |
| infoButtons | Object | - | Use this option to add custom buttons to the info bar (bottom right of the viewer). More info and demo. |
| imagesFolder | String | yoxviewPath + "images/" | The folder of the viewer's icons and graphics. |
| isRTL | Boolean | false | For bidirectional support, switches prev/next sides. For RTL languages such as Hebrew or Arabic, for example. |
| lang | String | 'en' |
The language for tooltips and button names. Value should be the language's two-letter abbreviation (en, es, fr, etc.). A language file should exist in the lang/ folder corresponding to the specified language. Click here for a list of available languages. |
| langFolder | String | yoxviewPath + "lang/" | Language packs folder location |
| linkToOriginalContext | Boolean | true | If true, a small icon is added to the right of the info bar, linking to the image in its original context, if the image is pulled from an external source, such as Picasa or Flickr. |
| loopPlay | Boolean | true | If true, slideshow play starts over after the last image. |
| playDelay | Number | 3000 | Time in milliseconds to display each image in slideshow mode. |
| popupMargin | Number | 20 | The minimum number of pixels between the popup and the window. |
| popupResizeTime | Number | 600 | The time in milliseconds it takes to make the resize transition from one image to the next. Set to zero to disable animations when changing images. |
| renderButtons | Boolean | true | Set to false if you want to implement your own Next/Prev buttons, using the API. |
| renderInfo | Boolean | true | Set to false to avoid rendering the info bar (in case you want to implement it by yourself, for example). |
| renderInfoPin | Boolean | true | If set to false, the pin/unpin button to the right of the info bar isn't rendered. |
| renderMenu | Boolean | true | Set to false if you want to implement you own menu (Play/Help/Close) using the API. |
| showBarsOnOpen | Boolean | true | If true, displays the top (help) bar and bottom (info) bar momentarily when the popup opens. |
| showButtonsOnOpen | Boolean | true | If true, displays the Prev/Next buttons momentarily when the popup opens. |
| titleDisplayDuration | Number | 2000 | The time in milliseconds to display the image's title, after which it fades out. |
| titlePadding | Number | 6 | Padding, in pixels, for the image's title. |
| videoSize | Object | - | A specified max size for displaying videos. Example: { maxWidth: 720, maxHeight: 560 } The JSON object should have both maxWidth and maxHeight, which specify the max size, in pixels, videos may have. Consider this size as a bounding box in which the videos are rendered, while keeping their aspect ratio. |
api提供事件如下：
| Event name | Signature | Description |
|---|---|---|
| onClose | onClose() | Called when the viewer opens. |
| onOpen | onOpen() | Called when the viewer opens. |
| onSelect | onSelect(imageIndex, image) | Called when an image is selected. Example:$('.yoxview').yoxview({ onSelect: function(imageIndex, image){
alert(' Image number ' + imageIndex + ' is now selected. Its title is: ' + image.media.title);
}
});
|
api提供方法如下：
| Method signature | Description |
|---|---|
| close() | Closes the viewer and stops the slideshow if playing. |
| closeHelp() | Closes the help panel, if open. |
| currentImage | Holds the currently displayed image's data. The object's structure is like this:{
media: {
alt: "The image's ALT attribute",
description: "Long optional text, if available is rendered below the title.",
height: 500, (image's height in pixels)
loaded: true, (whether the image has already been cached in the browser)
src: "/images/image1.jpg",
title: "The text that should be displayed in YoxView.",
width: 700 (image's width in pixels)
},
thumbnailImg: [img /images/thumb1.jpg] (jQuery object representing the image's thumbnail),
thumbnailSrc: "/images/thumb1.jpg" (the thumbnail's SRC attribute)
}
|
| first() | Takes the viewer to the first image. |
| help() | Opens the help panel in the viewer, if the viewer is open. |
| last() | Takes the viewer to the last image. |
| next() | Advances the viewer to the next image in line. |
| openGallery([viewIndex, [imageIndex]], [callBack]]) | Opens the viewer popup. The method has two optional parameters: viewIndex: The 0-based index of the view to open, in case there are multiple instances of YoxView on the same page. Default is 0. imageIndex: The 0-based index of the image to open, in the specified view. Default is 0. callBack: A function to call after the gallery has opened. For example, if you want to open the popup in slideshow mode, do this: yoxviewApi.openGallery(
0, // the view's index - defaults to 0 if not specified
0, // the index of the first image to display, defaults to 0
function(){
yoxviewApi.play();
}
);
|
| play() | Start/stop slideshow mode. |
| prev() | Takes the viewer to the previous image. |
| resize() | Resizes the viewer according to the document's size and the viewer's options. Used in the window.resize event. |
| select(imageIndex, [pressedBtn]) | Displays the specified image and shows the specified button, if specified. Use when the viewer is open. imageIndex: The 0-based index of the image to display. pressedBtn: a jQuery element of a button to display momentarily in the viewer. For example, if the image has been selected by pressing the Next button on the keyboard, specify the Next button. If no button should be display, leave blank. |
| unload() | Unloads YoxView from the page by removing the popup from the DOM, unbinding the click events from thumbnails and removing the yoxview API from memory. After calling this method you can't use the yoxview API. |