jquery 相册插件之yoxview

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.