Picture Magnifier--jquery Plug-in cloud Zoom

: Cloud_zoom.rar

Picture Magnifier effect is a good effect, many applications in e-commerce, image display and other sites, to bring a better experience for users. To achieve this effect of the code a lot, today to introduce to you is Cloud Zoom, it is a plug-in jQuery. Compared with other products, Cloud Zoom has the features of less code, more functionality, better compatibility, and supports Tint, Soft Focus and Inner three magnifier modes.
The Rel attribute in the A tag sets different property values, which can show different effects oh:
1. Default mode:
Rel= "Adjustx:10, adjusty:-4"

2. Color settings
Parameter settings:
rel= "tint: ' #ff0000 ', tintopacity:0.5, smoothmove:5,zoomwidth:480, adjusty:-4, Adjustx:10"

3. Zoom in on the small picture
Parameter settings:
rel= "position: ' Inside ', Showtitle:false, adjustx:-4, adjusty:-4"

4. Set the Zoom window position
Parameter settings:
Rel= "softfocus:true, Position: ' A ', smoothmove:2"

How to use:
Unlike other plug-ins, Cloud Zoom does not need to be called in the JS code anymore, just need to add Class A to "Cloud-zoom" to implement the call.
1. Load CSS:

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

2. Load javascript:

<type= "Text/javascript"  src= "/js/jquery.1.4.2.min.js " ></script><type= "Text/javascript" src = "/js/cloud-zoom.1.0.1.min.js" ></ Script >

3. HTML code:

        <ahref= ' images/bigimage00.jpg 'class= ' Cloud-zoom 'ID= ' zoom1 'rel= "Adjustx:10, adjusty:-4">            <imgsrc= "Images/smallimage.jpg"alt= ' 'title= "Main title of image 1" />        </a>                <ahref= ' images/bigimage00.jpg 'class= ' Cloud-zoom-gallery 'title= ' Thumbnail1 ' rel= "Usezoom: ' Zoom1 ', smallimage: ' Images/smallimage.jpg '">        <imgsrc= "Images/tinyimage.jpg"alt= "Thumbnail 1"title= "Main title of image 1"/></a>                <ahref= ' images/bigimage01.jpg 'class= ' Cloud-zoom-gallery 'title= ' Thumbnail2 ' rel= "Usezoom: ' Zoom1 ', smallimage: ' Images/smallimage-1.jpg '">        <imgsrc= "Images/tinyimage-1.jpg"alt= "Thumbnail 2"title= "Main title of Image 2"/></a>                                  <ahref= ' images/bigimage02.jpg 'class= ' Cloud-zoom-gallery 'title= ' Thumbnail3 ' rel= "Usezoom: ' Zoom1 ', smallimage: ' Images/smallimage-2.jpg '">        <imgsrc= "Images/tinyimage-2.jpg"alt= "Thumbnail 3"title= "Main title of Image 3"/></a>

Add only one class effect is the default, if you want other effects, you need to add a value to the Rel attribute of the A tag, the value is as follows:

parameter	description (from V1.0.0)	default
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 height of the small picture.	' 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 '
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	Set 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	applies a subtle blur effect to the small picture. 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

Picture Magnifier--jquery Plug-in cloud Zoom