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

zShowBox : 图片放大展示   简单 舒服 快速 兼容性好

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 + '">&laquo;</p><p id="zsb_next" style="right:-30px;' + css_zsb_p_n + '">&raquo;</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('http://www.google.com.hk/intl/zh-CN/images/logo_cn.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

本文转自曾祥展博客园博客，原文链接http://www.cnblogs.com/zengxiangzhan/archive/2011/09/23/2185908.html：，如需转载请自行联系原作者