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


Posted in Javascript onSeptember 24, 2011

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

zShowBox 图片放大展示jquery版 兼容性
打包下载地址

Javascript 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
vue中锚点的三种方法
Jul 06 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
也说JavaScript中String类的replace函数
Sep 22 #Javascript
javascript笔记 String类replace函数的一些事
Sep 22 #Javascript
Prototype的Class.create函数解析
Sep 22 #Javascript
Javascript中的this绑定介绍
Sep 22 #Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 #Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 #Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 #Javascript
You might like
php计算整个目录大小的方法
2015/06/19 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
javascript编程起步(第七课)
2007/01/10 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python 异常处理实例详解
2014/03/12 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
公司廉洁自律承诺书
2014/03/27 职场文书
怎样填写就业意向
2014/04/02 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
还款承诺书范文
2014/05/20 职场文书
创新社会管理心得体会
2014/09/12 职场文书
部门2014年度工作总结
2014/11/12 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
村官个人总结范文
2015/03/03 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python