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

zShowBox.js
复制代码代码如下:
/*
* zShowBox （图片放大展示）
*/
function zShowBox（domChunk） {
//为每张图片链接加上 class="zshowbox"
var zcounter = 0;
$（domChunk + " a"）.each（function （） {
var a_href = $（this）[0].href.toLowerCase（）;
var file_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 （） {
var current = $（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:#000 url（" + loadingimg + "） no-repeat center center;",
css_zsb = "z-index:99999;position:fixed;left:50%;top:50%;",
css_zsb_img = "display:none;border:5px solid #777;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;box-shadow:1px 1px 5px #333,-1px -1px 5px #333;-moz-box-shadow:1px 1px 5px #333,-1px -1px 5px #333;-webkit-box-shadow:1px 1px 5px #333,-1px -1px 5px #333;",
css_zsb_p_n = "display:none;cursor:pointer;position:absolute;top:50%;line-height:80px;margin:-40px 0 0 0;color:#eee;text-shadow:1px 3px 5px #000;font-size:40px;font-family:Arial,Tahoma;";
if （typeof document.body.style.maxHeight === "undefined"） { //if IE 6
alert（IE6！太落后了……"）;
return false;
} else {
$（"body"）.append（"<div id="zsb_bg" style="" + css_zsb_bg + ""></div><div id="zsb" style="" + css_zsb + ""><img id="zsb_img" style="" + css_zsb_img + "" /><p id="zsb_prev" style="left:-30px;" + css_zsb_p_n + "">«</p><p id="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--; else current++;
$（this）.parent（）.prev（）.css（"background-image", "url（" + loadingimg + "）"）;
$（"#zsb"）.find（"img"）.remove（）.end（）.append（"<img id="zsb_img" style="" + css_zsb_img + "" />"）;
zsb_img_url = $（"#zsb-" + current）.attr（"href"）;
zsh_img（"#zsb_img", zsb_img_url, pagesize, current, zcounter）;
return false;
}）;
$（"#zsb_bg,#zsb_img"）.click（function （） {
$（"#zsb_bg,#zsb_img"）.unbind（"click"）;
$（"#zsb_bg,#zsb"）.fadeOut（400, function （） { $（this）.remove（）; }）;
return false;
}）;
}
return false;
}）;
}
function zsh_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 （） {
var img_w,img_h;
var x = 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;
}
} else if （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;
}
}
var marginleft = -（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（）;}
}）;
}
function zsb_getPageSize（） {
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || （de && de.clientWidth） || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || （de && de.clientHeight） || document.body.clientHeight;
arrayPageSize = [w, h];
return arrayPageSize;
}
var loadingimg = （function loadingimg（） { //获取loading图片url
var i = 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++;
}
return url.replace（"/zshowbox.js", "/zshowbox-loading.gif"）;
}）（）;

图片头数据加载就绪事件 - 更快获取图片尺寸
复制代码代码如下:
/**
* 图片头数据加载就绪事件 - 更快获取图片尺寸
* @version 2011.05.27
* @author TangBin
* @see http://www.planeart.cn/？p=1121
* @param {String} 图片路径
* @param {Function} 尺寸就绪
* @param {Function} 加载完毕（可选）
* @param {Function} 加载错误（可选）
* @example imgReady（"/upload/201109/20110924011408313.png", function （） {
alert（"size ready: width=" + this.width + "; height=" + this.height）;
}）;
*/
var imgReady = （function （） {
var list = [], intervalId = null,
// 用来执行队列
tick = function （） {
var i = 0;
for （; i < list.length; i++） {
list[i].end ？ list.splice（i--, 1） : list[i]（）;
};
！list.length && stop（）;
},
// 停止所有定时器队列
stop = function （） {
clearInterval（intervalId）;
intervalId = null;
};
return function （url, ready, load, error） {
var onready, width, height, newWidth, newHeight,
img = new Image（）;
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）;
// IE gif动画会循环执行onload，置空onload即可
img = img.onload = img.onerror = null;
};
// 加入队列中定期执行
if （！onready.end） {
list.push（onready）;
// 无论何时只允许出现一个定时器，减少浏览器性能损耗
if （intervalId === null） intervalId = setInterval（tick, 40）;
};
};
}）（）;

调用：
复制代码代码如下:
zShowBox（".gridlist"）;

附加 loging

打包下载地址

首页 / 脚本样式 / JavaScript / zShowBox 图片放大展示jquery版 兼容性

首页 / 脚本样式 / JavaScript / zShowBox 图片放大展示jquery版兼容性