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

　　/*

　　* 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');