jquery plugin cloud-zoom (magnifier)

Effect preview:http://www.helloweba.com/demo/cloud-zoom/

source code Download:http://pan.baidu.com/s/1eQnadXo

Cloud Zoom is an image magnification jquery plugin that works as Magic Zoom. Compared to popular jqzoom plugins, Cloud Zoom is small, with more features and more powerful cross-browser compatibility.

View Demo Features

Compatible with most browsers (the browsers that have been tested are: ie6+, Firefox, Chrome, Opera, Safari)

Easy to integrate with basic, effective HTML.

(Fine-shrinking) script is small, only 6Kb.

Smooth zoom movement.

Gallery mode.

Coloring, soft focus and internal zoom function.

It is completely free of charge.

How to use

1. Load CSS:

 
<link href="/styles/cloud-zoom.css" type="text/css" rel="stylesheet" /> 

2. Load javascript:

 <script type= text/javascript   " src="  / Js/jquery.1.4.2.min.js   ></script> <script Type= " text/javascript  "  Src= " /js/cloud-zoom.1.0.1.min.js  "  ></script> 

3. HTML code:

<a href='/images/zoomengine/bigimage00.jpg' class='Cloud-zoom-gallery'title='Thumbnail 1'rel="usezoom: ' Zoom1 ', smallimage: '/images/zoomengine/smallimage.jpg '"> "/images/zoomengine/tinyimage.jpg"alt ="Thumbnail 1"/></a> <a href='/images/zoomengine/bigimage01.jpg' class='Cloud-zoom-gallery'title='Thumbnail 2'rel="usezoom: ' Zoom1 ', smallimage: '/images/zoomengine/smallimage-1.jpg '"> "/images/zoomengine/tinyimage-1.jpg"alt ="Thumbnail 2"/></a> <a href='/images/zoomengine/bigimage02.jpg' class='Cloud-zoom-gallery'title='Thumbnail 3'rel="usezoom: ' Zoom1 ', smallimage: '/images/zoomengine/smallimage-2.jpg '"> "/images/zoomengine/tinyimage-2.jpg"alt ="Thumbnail 3"/></a>

Plug-in parameter list

Parameters	Description (from V1.0.0)	Default value
Zoomwidth	Sets the width of the zoom window and, if set to Auto, the window width is equal to the small picture width.	' Auto '
Zoomheight	Sets the height of the Zoom window and, if set to auto, the height of the window is equal to the small picture height.	' Auto '
Position	Specifies the position of the Zoom window relative to the small picture. The allowed values are ' left ', ' right ', ' top ', ' bottom ', ' inside ', or it can be a special HTML element ID placement such as the zoom position of the window: ' element1 '	' Right '
Adjustx	Allows you to fine-tune the x position of the pixel's zoom window.	0
Adjusty	Allows you to fine-tune the y position of the Pixel's zoom window.	0
Tint	Specifies the color of the small picture that is covered. The color should specify a hexadecimal format, such as ' #aa00aa '.	False
Tintopacity	Specifies the transparency of the color, where 0 is completely transparent and 1 is completely opaque.	0.5
Lensopacity	Sets the transparency of the lens mouse pointer, where 0 is completely transparent and 1 is completely opaque. In color and soft focus mode, it will always be transparent.	0.5
Softfocus	A small picture that applies to a subtle blur effect. Set to True or false.	False
Smoothmove	Image drift scaling, the higher the number, the smoother/easier to drift motion. 1 = not smooth.	3
Showtitle	Whether to display the caption of the picture.	True
Titleopacity	Specifies whether the caption opacity is displayed, where 0 is completely transparent and 1 is completely opaque.	0.5

jquery plugin cloud-zoom (magnifier)