jQuery图片放大预览插件 cloud-zoom

分享一个jquery的图片放大预览插件:cloud-zoom.

cloud-zoom DEMO

部署步骤:

1.加载jquery-1.4.js 和 cloud-zoom.1.0.2.min.js

2.加入样式表(DEMO中<style>部分)

3.为需要放大预览效果的缩略图添加超链接<a> 并将类命名为”cloud-zoom” class=”cloud-zoom”

4.在超链接<a> 的rel属性中加入需要的参数实现不同的效果

实例:

<a href=”images/大图.jpg” class=”cloud-zoom” rel=”position:’inside’ ,showTitle:false, adjustX:-2, adjustY:-2″><img src=”images/缩略图.jpg” title=”iinterest” /></a>

cloud-zoom参数说明:

Parameter	Description (from V1.0.0)	Default Value
zoomWidth	The width of the zoom window in pixels. If ‘auto’ is specified, the width will be the same as the small image.	‘auto’
zoomHeight	The height of the zoom window in pixels. If ‘auto’ is specified, the height will be the same as the small image.	‘auto’
position	Specifies the position of the zoom window relative to the small image. Allowable values are ‘left’, ‘right’, ‘top’, ‘bottom’, ‘inside’ or you can specifiy the id of an html element to place the zoom window in e.g. position: ‘element1′	‘right’
adjustX	Allows you to fine tune the x-position of the zoom window in pixels.	0
adjustY	Allows you to fine tune the y-position of the zoom window in pixels.	0
tint	Specifies a tint colour which will cover the small image. Colours should be specified in hex format, e.g. ‘#aa00aa’. Does not work with softFocus.	false
tintOpacity	Opacity of the tint, where 0 is fully transparent, and 1 is fully opaque.	0.5
lensOpacity	Opacity of the lens mouse pointer, where 0 is fully transparent, and 1 is fully opaque. In tint and soft-focus modes, it will always be transparent.	0.5
softFocus	Applies a subtle blur effect to the small image. Set to true or false. Does not work with tint.	false
smoothMove	Amount of smoothness/drift of the zoom image as it moves. The higher the number, the smoother/more drifty the movement will be. 1 = no smoothing.	3
showTitle	Shows the title tag of the image. True or false.	true
titleOpacity	Specifies the opacity of the title if displayed, where 0 is fully transparent, and 1 is fully opaque.	0.5