zShowBox (图片放大展示jquery版 兼容性好)

/*
*zShowBox(图片放大展示)
*/
functionzShowBox(domChunk){
//为每张图片链接加上class="zshowbox"
varzcounter=0;
$(domChunk+'a').each(function(){
vara_href=$(this)[0].href.toLowerCase();
varfile_type=a_href.substring(a_href.lastIndexOf('.'));
if(file_type=='.jpeg'||file_type=='.jpg'||file_type=='.png'||file_type=='.gif'||file_type=='.bmp'){$(this).addClass('zshowbox').attr('id','zsb-'+zcounter);zcounter++;};
});
$(domChunk+'a.zshowbox').click(function(){
varcurrent=$(this).attr('id').split('zsb-')[1],
pagesize=zsb_getPageSize(),
zsb_img_url=$(this).attr('href'),
css_zsb_bg='z-index:9999;overflow:hidden;position:fixed;left:0;top:0;width:100%;height:100%;background:#000url('+loadingimg+')no-repeatcentercenter;',
css_zsb='z-index:99999;position:fixed;left:50%;top:50%;',
css_zsb_img='display:none;border:5pxsolid#777;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;box-shadow:1px1px5px#333,-1px-1px5px#333;-moz-box-shadow:1px1px5px#333,-1px-1px5px#333;-webkit-box-shadow:1px1px5px#333,-1px-1px5px#333;',
css_zsb_p_n='display:none;cursor:pointer;position:absolute;top:50%;line-height:80px;margin:-40px000;color:#eee;text-shadow:1px3px5px#000;font-size:40px;font-family:Arial,Tahoma;';
if(typeofdocument.body.style.maxHeight==="undefined"){//ifIE6
alert(IE6！太落后了……');
returnfalse;
}else{
$('body').append('<divid="zsb_bg"style="'+css_zsb_bg+'"></div><divid="zsb"style="'+css_zsb+'"><imgid="zsb_img"style="'+css_zsb_img+'"/><pid="zsb_prev"style="left:-30px;'+css_zsb_p_n+'">«</p><pid="zsb_next"style="right:-30px;'+css_zsb_p_n+'">»</p></div>');
$('#zsb_bg').fadeTo(600,0.7);
zsh_img('#zsb_img',zsb_img_url,pagesize,current,zcounter);
$('#zsb_prev,#zsb_next').click(function(){
if($(this).attr('id')=='zsb_prev')current--;elsecurrent++;
$(this).parent().prev().css("background-image",'url('+loadingimg+')');
$('#zsb').find('img').remove().end().append('<imgid="zsb_img"style="'+css_zsb_img+'"/>');
zsb_img_url=$('#zsb-'+current).attr('href');
zsh_img('#zsb_img',zsb_img_url,pagesize,current,zcounter);
returnfalse;
});
$('#zsb_bg,#zsb_img').click(function(){
$('#zsb_bg,#zsb_img').unbind('click');
$('#zsb_bg,#zsb').fadeOut(400,function(){$(this).remove();});
returnfalse;
});
}
returnfalse;
});
}
functionzsh_img(img_id,zsb_img_url,pagesize,current,zcounter){
$('#zsb_prev,#zsb_next').hide();
//动态获取图片的宽度和高度的像素值
////IE下，ajax会缓存，导致onreadystatechange函数没有被触发，所以需要加一个随机数
$(img_id).attr('src',zsb_img_url+'?t='+Math.random()).load(function(){
varimg_w,img_h;
varx=pagesize[0]-100,y=pagesize[1]-100;
//imgReady图片头数据加载就绪事件-更快获取图片尺寸
imgReady(zsb_img_url,function(){
img_w=this.width;img_h=this.height;
});

//img_w=$(this).width(),img_h=$(this).height();
if(img_w>x){
img_h=img_h*(x/img_w);
img_w=x;
if(img_h>y){
img_w=img_w*(y/img_h);
img_h=y;
}
}elseif(img_h>y){
img_w=img_w*(y/img_h);
img_h=y;
if(img_w>x){
img_h=img_h*(x/img_w);
img_w=x;
}
}
varmarginleft=-(img_w/2+5)+'px',
margintop=-(img_h/2+5)+'px';
img_w=img_w+'px',img_h=img_h+'px';
$(this).css({"width":img_w,"height":img_h}).fadeIn(600).parent().css({"margin-left":marginleft,"margin-top":margintop}).prev().css("background-image","none");
if(current>0){$('#zsb_prev').show();}
if(current<zcounter-1){$('#zsb_next').show();}
});
}
functionzsb_getPageSize(){
varde=document.documentElement;
varw=window.innerWidth||self.innerWidth||(de&&de.clientWidth)||document.body.clientWidth;
varh=window.innerHeight||self.innerHeight||(de&&de.clientHeight)||document.body.clientHeight;
arrayPageSize=[w,h];
returnarrayPageSize;
}
varloadingimg=(functionloadingimg(){//获取loading图片url
vari=0,got=-1,url,len=document.getElementsByTagName('script').length;
while(i<=len&&got==-1){
url=document.getElementsByTagName('script')[i].src;
got=url.indexOf('/zshowbox.js');
i++;
}
returnurl.replace('/zshowbox.js','/zshowbox-loading.gif');
})();

/**
*图片头数据加载就绪事件-更快获取图片尺寸
*@version2011.05.27
*@authorTangBin
*@seehttp://www.planeart.cn/?p=1121*@param{String}图片路径
*@param{Function}尺寸就绪
*@param{Function}加载完毕(可选)
*@param{Function}加载错误(可选)
*@exampleimgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png',function(){
alert('sizeready:width='+this.width+';height='+this.height);
});
*/
varimgReady=(function(){
varlist=[],intervalId=null,

//用来执行队列
tick=function(){
vari=0;
for(;i<list.length;i++){
list[i].end?list.splice(i--,1):list[i]();
};
!list.length&&stop();
},

//停止所有定时器队列
stop=function(){
clearInterval(intervalId);
intervalId=null;
};

returnfunction(url,ready,load,error){
varonready,width,height,newWidth,newHeight,
img=newImage();

img.src=url;

//如果图片被缓存，则直接返回缓存数据
if(img.complete){
ready.call(img);
load&&load.call(img);
return;
};

width=img.width;
height=img.height;

//加载错误后的事件
img.onerror=function(){
error&&error.call(img);
onready.end=true;
img=img.onload=img.onerror=null;
};

//图片尺寸就绪
onready=function(){
newWidth=img.width;
newHeight=img.height;
if(newWidth!==width||newHeight!==height||
//如果图片已经在其他地方加载可使用面积检测
newWidth*newHeight>1024
){
ready.call(img);
onready.end=true;
};
};
onready();

//完全加载完毕的事件
img.onload=function(){
//onload在定时器时间差范围内可能比onready快
//这里进行检查并保证onready优先执行
!onready.end&&onready();

load&&load.call(img);

//IEgif动画会循环执行onload，置空onload即可
img=img.onload=img.onerror=null;
};

//加入队列中定期执行
if(!onready.end){
list.push(onready);
//无论何时只允许出现一个定时器，减少浏览器性能损耗
if(intervalId===null)intervalId=setInterval(tick,40);
};
};
})();

zShowBox('.gridlist');

附加loging