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 相关文章推荐
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
深入解析php模板技术原理【一】
2008/01/10 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
js页面跳转常用的几种方式
2010/11/25 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
JS实现多功能计算器
2020/10/28 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Python 类的特殊成员解析
2018/06/20 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
什么是python的列表推导式
2020/05/26 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
十佳班主任事迹材料
2014/01/18 职场文书
通信生自我鉴定
2014/01/18 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
地陪导游欢迎词
2015/01/26 职场文书