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 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
也说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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
解析php中die(),exit(),return的区别
2013/06/20 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
Vue实现简易计算器
2020/02/25 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
Python的print用法示例
2014/02/11 Python
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python实现的选择排序算法示例
2017/11/29 Python
python绘制圆柱体的方法
2018/07/02 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
创意活动策划书
2014/01/15 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
实习生岗位职责
2014/04/12 职场文书
2014年维稳工作总结
2014/11/18 职场文书
水电工程师岗位职责
2015/02/13 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python