;(function($){
var wdimgarr=[];
var wdimgtitle=[];
var arrindex='';
function wdimageview(opts){
this.opts = $.extend({},this.defined,opts);
this.opts.body = $('body');
this.opts.winw = $(window).width();
this.opts.winh = $(window).height();
this.init(this.opts);//初始化
//点击元素触发
this.clickaction(this.opts);
this.clickclosed();
this.clicknext();
this.clickprev();
}
//初始化,向页面中插入dom
wdimageview.prototype.init=function(){
var opts = this.opts;
var maskhtml='
';
var mainhtml=''+
'';
var titlehtml = '';
var allhtml = maskhtml + mainhtml;
opts.body.append(allhtml);
if(opts.showtitle){
$('#imgbox').append(titlehtml);
}
switch (opts.position){
case 'left':
$('#wdimagesview-mask').css('left','-'+opts.winw+'px').css('top','0px');
break;
case 'right':
$('#wdimagesview-mask').css('right','-'+opts.winw+'px').css('top','0px');
break;
case 'top':
$('#wdimagesview-mask').css('top','-'+opts.winh+'px').css('left','0px');
break;
case 'bottom':
$('#wdimagesview-mask').css('bottom','-'+opts.winh+'px').css('left','0px');
break;
}
}
//点击时触发
wdimageview.prototype.clickaction = function (opts){
var opts=opts;
var obj = this;
$(document).on('click',opts.dom+'['+opts.group+']',function (ev){
if(wdimgarr.length>0){
wdimgarr=[];
wdimgtitle=[];
}
$(opts.dom+'['+opts.group+']').each(function(index,item){
wdimgarr.push($(this).attr(opts.item))
wdimgtitle.push($(this).attr(opts.title))
});
var _thisindex = wdimgarr.search($(this).attr(opts.item));
if(_thisindex!=-1){
arrindex = _thisindex;
obj.loadimg(wdimgarr,wdimgtitle,_thisindex);
}
ev.preventdefault();
})
}
//加载图片
wdimageview.prototype.loadimg=function (imgurl,imgtitle,index){
var obj = this;
var opts = this.opts;
var animateopst={};
console.log(this.opts);
var objimg = new image();
objimg.src=imgurl[index];
var imgw,imgh;
objimg.onload=function(){
$('#wdimagesview-mask').show();
imgw = this.width;
imgh = this.height;
switch (opts.position){
case 'left':
animateopst={
left:0
}
break;
case 'right':
animateopst={
right:0
}
break;
case 'top':
animateopst={
top:0
}
break;
case 'bottom':
animateopst={
bottom:0
}
break;
}
//显示背景层后,开始动画出图片层
$('#wdimagesview-mask').animate(animateopst,opts.time,'linear',function (){
$('#wdimagesview-main').fadein();
$('#wdimagesview-closed').fadein();
$('.wdimagesview-arr').fadein();
if (imgw>1280){
imgh=imgh*(1280/imgw);
imgw=1280;
}
obj.showimg(imgw,imgh);
})
}
}
wdimageview.prototype.showimg = function (imgw,imgh){
var obj = this;
var opts = this.opts;
$('#imgbox img').hide();
$('#wdimagesview-main').animate({
width:imgw,
height:imgh,
marginleft:-imgw/2,
margintop:-imgh/2
},500,'linear',function (){
$('#imgbox img').show().attr('src',wdimgarr[arrindex]);
$('#imgtitle').empty().append(wdimgtitle[arrindex]);
})
}
//下一张图片
wdimageview.prototype.clicknext = function (){
var obj = this;
var opst = this.opts;
$(document).on('click','#wdnext',function(){
if(!$('#wdimagesview-main').is(':animated')){
var arrlen = wdimgarr.length;
if(arrindex==(arrlen-1)){
obj.loadimg(wdimgarr,wdimgtitle,arrindex);
}else{
console.log(arrindex);
console.log(wdimgarr);
console.log(wdimgtitle);
arrindex = arrindex+1;
if(arrindex-1){
console.log('prevdo')
obj.loadimg(wdimgarr,wdimgtitle,arrindex);
}
}
}
})
}
//关闭
wdimageview.prototype.clickclosed=function (){
var obj = this;
$('#wdimagesview-closed,#wdimagesview-mask').on('click',function (){
obj.allclosed();
});
}
wdimageview.prototype.allclosed = function (){
var opts = this.opts;
var obj = this;
var animateopst={};
$('#wdimagesview-main').hide();
$('#wdimagesview-closed').hide();
$('.wdimagesview-arr').hide();
$('#wdimagesview-main').css({
width:400,
height:300,
marginleft:-200,
margintop:-150
})
switch (opts.position){
case 'left':
animateopst={
left:-opts.winw
}
break;
case 'right':
animateopst={
right:-opts.winw
}
break;
case 'top':
animateopst={
top:-opts.winh
}
break;
case 'bottom':
animateopst={
bottom:-opts.winh
}
break;
}
$('#wdimagesview-mask').animate(animateopst,opts.time,'linear',function (){
$(this).hide();
$('#imgbox img').hide();
$('#imgtitle').empty();
})
}
//默认参数
wdimageview.prototype.defined={
dom:'a',
group:'rel',
item:'href',
title:'reltitle',
showtitle:false,
position:'left',//left,right,top,bottom
time:'1000',
path:'',//图片相对路径
loadimg:function(){}
}
//生成是jq组件
$.extend({
wdimageview:function(opts){
return new wdimageview(opts);
}
})
//为原生数组添加查找数组方法,如果查找到就返回数组下标
array.prototype.search = function (value) {
var i = this.length;
while (i--) {
if (this[i] == value) {
return i;
}
}
return -1;
}
})(jquery)