Zoomimage

Translator 翻译者

关于翻译这篇文档

在做项目的时候需要一个jQuery的图片浏览器，一开始找了imageBox，但是发现用的是 jQuery 1.2.3，和 jQuery 1.4 又不兼容，又懒得修改，便换了个插件，使用这个ZoomImage了。我英文不好，所以看着也有些累，还好不是很多，所以还是能耐着性子看完的，也不知是什么原因，突发奇想的就翻译了这篇文档。本人水平有限所有文档中难免会有些错误，还请何谓不要骂我，当然欢迎拍砖。

关于我

男
1988年6月生
生于衢州，现居杭州萧山

我是一个小小的程序员，没什么本事，却总梦想着有一天能飞黄腾达。买了好多的技术书籍，看了很多，总结的很少，所以进步很慢。每天都享受着朝九晚五的生活，很喜欢起床后赶公交车，然后再公交车上美美的睡上一觉，感觉这才是一个真宗的都市上班族。

工作历程

千辛万苦进了信雅达，又绞尽脑汁去辞职。
去信雅达面试过两次，第一次面试后，在苦苦的等待了一个月后，得知他们不要实习生，所以与它裁剪而过。第二次面试换了个部门，还算顺利一周后就到岗上班了。

在信雅达主要参与了徽商银行反洗钱项目，项目中主要也就是两个人加一个不常出现的项目组长
在公司一年时间里三个人印象最深，也是参与徽商反洗钱项目的人。

1 号人物：老胡（实在）在徽商项目中每天吃住在一起的人，四川人，很实在，现在在首都北京了。
2 号人物：老俞（牛人）在徽商项目中来支援的信雅达牛人，很能自学，很难思考，不过工作外的事情很难联系到他，听说现在在上海了。
3 号人物：王品（有趣）在徽商项目组长，凭借Oracle的技术在信雅达立足多年，很忠实的员工，PS：等着老钱升职后座上他的位置。

2009/09 -- 现在 马大嫂真实婚恋网 工作比较简单 可以自己多学习
2009/07 -- 2009/09 自己在家开淘宝 最后还是应资金问题放弃了
2008/09 -- 2009/06 信雅达系统工程股份有限公司

学习历程

自认外还算可以，虽然成绩不好，但至少没有留级复读，最终能够大专顺利毕业。

2006/09 -- 2009/06 浙江广厦建设职业技术学院 大专
2003/09 -- 2006/06 浙江巨化中学（现已更名为 浙江衢州高级中学） 高中
2000/09 -- 2003/06 浙江衢州巨化第二中学 初中

祈求

如果有人要我的话 请狂P我，愿意去你们公司看看，如果好的话会跳巢的。

何谓好？工资高，休息多，任务轻，上班时间晚，对我来说交通方便。。。。。。（~~~~板砖飞来，哪有这么好的啊）呵呵~~~~~~留下我的联系方式，有事M我。

E-Mail:fulei.20030727@126.com

2010.8.3 青莎阁

关于

现在你的图片将以一种非常绚丽的方式打开。这个被悄悄劫持的链接会在当前页面弹出一个有边框和阴影的图片。

特点

  • 预先载入图像
  • 这些图像可以在画廊分组
  • 缩放的图片有一个适合的窗口
  • 键盘导航

例子

图片在触发时打开。

City lights Flashlight Laser lights 

$('a.lightsGal').zoomimage();

窗口在浏览器中心，边框20px，触发后影藏原图。

The Moon Drops Church 

$('a.bwGal').zoomimage({
	border: 20,
	centered: true,
	hideSource: true
});

用户自定义的阴影样式，标题在鼠标悬停的时候显示，没有控制栏，在图像放大和缩小的时候使用回调函数。

City lights Flashlight Laser lights 

$('a.customGal').zoomimage({
	controlsTrigger: 'mouseover',
	className: 'custom',
	shadow: 40,
	controls: false,
	opacity: 1,
	beforeZoomIn: function(boxID) {
		$('#' + boxID)
			.find('img')
			.css('opacity', 0)
			.animate(
				{'opacity':1},
				{ duration: 500, queue: false }
			);
	},
	beforeZoomOut: function(boxID) {
		$('#' + boxID)
			.find('img')
			.css('opacity', 1)
			.animate(
				{'opacity':0},
				{ duration: 500, queue: false }
			);
	}
});

Download

zoomimage_zh_cn.zip (515 kb) 包含: jQuery, Javscript, CSS, 图片, 例子 和 指导.

修改日志

2007年11月14日
修改：按键事件
新可选项：preload - 改变图片预处理方式，增加 document load 和 click 两种情况
2007年11月13日
新可选项: className - 允许你在同一张页面上使用不同的风格
新可选项: controlsTrigger - 当鼠标悬停在图片上或图片获取焦点时显示控制栏
新可选项: onFocus - 当图片获取焦点时的回调事件
修改：在 Safari 上的键盘导航
2007年11月12日
第一个版本发布。

Implement

附加JavaScript和CSS文件到你的文档。编辑CSS文件并且 匹配你的图片路径，同时改变颜色匹配你网站的主题 重要：像例子中一样确定包含的JavaScript文件 具体顺序。

<link rel="stylesheet" media="screen" type="text/css" href="css/zoomimage.css" />
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/zoomimage.js"></script>

调用代码

你所需要做的所有事就是使用jQuery的方式选择一个元素并且调用插件。

 $('a.myLinks').zoomimage(options);

可选项

一个哈希参数。所有的参数都是可选的。

Opacity float 控制栏和标题栏的不透明度。默认: 0.3
border integer 图片的边框宽度。默认: 0
duration integer 动态化持续时间。默认: 300
译者注：控制图片放大的时间和标题栏、控制栏显示的时间，两个操作不同步进行。
easing string 动画缓和。默认: linear
prevent integer 拖动图像前忽略的位移像素（防止鼠标的意外拖动所用）。默认: 14
译者注：防止鼠标按下后意外移动导致图像发生位移。
controls boolean 是否显示控制条（如果一个图片组中只有一张图片，则控制条不显示）。默认: true
caption boolean 是否显示标题（标题的内容来源于a标签的title属性）。默认: true
centered boolean 图片放大后是否在浏览器中心显示。默认: false
hideSource boolean 图片放大后是否影藏原微缩图像。默认: false
className string 用户自定义的CSS样式名。默认: false。
译者注：false时使用zoomimage.css文件，className即为css文件名同时也是css类名。
controlsTrigger string 控制标题的显示样式，'focus'图像获取到焦点是显示标题，'mouseover'鼠标悬停在图片上时显示标题。默认: 'focus'
preload string 预处理，'click'当点击是加载图片 ，'load'文档载入时就加载图片。默认: 'click'
onLoad function 回调函数，当图像被加载的时候触发
beforeZoomIn function 回调函数，在图像被放大前触发
onZoomIn function 回调函数，在图像被放大时触发
beforeZoomOut function 回调函数，在图像被缩小前触发
onZoomOut function 回调函数，在图像被缩小时触发
onFocus function 回调函数，当图片获取焦点时触发

关闭所有图片或移除节点

如果你想关闭所有打开的图片或像不通过触发器清除图片（从DOM移除），那么你可以使用 'zoomimageClear'。这个插件的这个选择器永远是 'div.zoomimage'.

$('div.zooimage').zoomimageClear();

阴影设置

你可以自定义阴影。要做到这一点你必须明白如何布局框来呈现阴影。

Shadow layout

每个CSS类负责一个特定区域的阴影。你可以在类中改变背景图片的位置和大小。