jZoom

A tiny and easy-using jQuery plugin for zooming images

Index

$ npm install jzoom

$ bower install jzoom

<script src="jquery.min.js"></script> <script src="jzoom.js"></script>

Call the plugin on an image's container as simple as

$('#container').jzoom();

All done !

Custom the plugin with available options which are listed below.

$('#container').jzoom({     option: value,     option2: value2,     ... });

Option	Type	Default	Description
width	Number	400	The width of zooming window.
height	Number	400	The height of zooming window.
position	String	"right"	The relative positon to the zoomed image or container. "top", "bottom" and "left" are permitted.
offsetX	Number	20	The deviation on X-asix, can't be negative.
offsetY	Number	0	The deviation on Y-asix, can't be negative.
opacity	Number	0.6	The opacity of lens div.
bgColor	String	"#fff"	The background color of lens div.
loading	String	"Loading..."	The loading text on zooming window when big image is loading.
suffixName	String	"_big"	The suffix name of big image.
imgType	String	the zoomed image type	The type of big image. The default option is recommended.

No CSS needed.
The container will be added position: relative if it's not positioned.
For getting best effect, the big image and the zoomed image should be requested:
- filenames: If the filename of the zoomed image is "image", then the big image should be "image + suffix name".
- types: The same types were recommended because some bugs may appear on IE.
- In same folder.

$ npm install jzoom

$ bower install jzoom

<script src="jquery.min.js"></script> <script src="jzoom.js"></script>

然后在想要放大的图片的容器上调用插件，

$('#container').jzoom();

即可实现默认效果。

自定义插件时，需要在方法中传入一个对象，可配置的选项列于下表。

$('#container').jzoom({     option: value,     option2: value2,     ... });

选项	类型	默认值	描述
width	Number	400	放大镜窗口的宽度
height	Number	400	放大镜窗口的高度
position	String	"right"	放大镜窗口相对于图片或容器的位置，还可设置为"top", "bottom", "left"
offsetX	Number	20	放大镜窗口在水平方向上的偏移，不能为负
offsetY	Number	0	放大镜窗口在垂直方向上的偏移，不能为负
opacity	Number	0.6	镜头div的透明度
bgColor	String	"#fff"	镜头div的背景色
loading	String	"Loading..."	加载图片时显示的文字，水平垂直居中
suffixName	String	"_big"	大图后缀名
imgType	String	原图格式	大图的格式，建议与原图相同

CSS部分代码已完全集成到JS代码中。
如果图片容器没有进行定位，则会默认添加position: relative属性。
大图与原图之间需要有一定的对应关系：
- 名称：如原图的文件名为image，则大图的文件名需为“image + 后缀名” 。
- 格式：大图与原图的格式建议相同，因为在IE下有时会出现bug。
- 位于同一目录下。