jquery zoom jquery Magnifier effect

This is a very good image to add a magnifying glass effect, can be applied in such as Zen Cart,magento Electronic Mall and other open-source projects. If you want to see how it works, you can directly access:

http://www.mind-projects.it/projects/jqzoom/demos.php

Feel good to download a play it, jquery out of the plug-ins are very easy to use, can also be used as a learning example.

How to install:

Include the jquery file in the Web page, and then include the Jqzoom file, as follows:

<script type= ' text/javascript ' src= ' js/jquery-1.2.6.js ' ></script><script type= ' text/javascript ' src = ' Js/jquery.jqzoom-1.0.1.js ' ></script>

Then add the jqzoom.css to the Web page:

<link rel= "stylesheet" type= "Text/css" href= "Css/jqzoom.css"/>

How do I use it?

Anchor

Use is very simple, first specify a <a> tag, pointing to a large picture, which contains a small picture:

<a href= "Images/bigimage. JPG "class=" MYCLASS "  title=" MYTITLE "></a>

Smallimage. JPG: This is the image that the default user sees, that is, the image that is magnified later

Bigimage. JPG: The picture seen by the magnifying glass
MYCLASS: Represents the anchor Class,that would be used to instantiate the Jqzoom script to all the elements matching this class (yo U can use a ID as well). Used to identify this <a> tag to apply the Magnifier feature. After that we can select all the <a> tags to apply jqzoom through the class selector.

mytitle/image TITLE: These text will be displayed on the Magnifier window.

When the preparation is done, you can call Jqzoom with the following simple code:

$ (document). Ready (function () {$ ('. MYCLASS). Jqzoom ();});

This just uses the jqzoom tag mode, in fact it has more parameters to set to get more effect, see the following example:

$ (document). Ready (function () {var options = {    zoomwidth:300,    zoomheight:250,            xoffset:10,            yoffset:0 ,            position: "Right"//and more options};$ ('. MYCLASS). Jqzoom (options);});

Property:

Cloud Zoom has many properties that can be set to change the appearance and visual effects of the picture.

The properties of Cloud Zoom can be specified in Data-cloudzoom, for example:

Data-cloudzoom = "Zoomimage: '/mypath.jpg ', usezoom: ' #zoom1 '"

Literal values/strings should be quoted in quotes, such as Usezoom: "# myzoom". Digital, true or false without adding, such as Zoomflyout:false

Note: Older versions of Cloud Zoom (2.1 1210171228) require that properties have a strict JSON format. Although it can still be effective, it is not recommended.

Property list:

Property name	Type	Describe	Default value
Zoomimage	String	Zooms the path of the picture, and if no scaled picture is specified, the small image (the picture that is specified in the image element) is used	" "
Tintcolor	String	Color effect	#fff
Tintopacity	Number	Specifies the transparency of the color, the range is 0-1,0 is completely transparent, and 1 is completely opaque.	0.25
Animationtime	Number	The duration, in milliseconds, of the animation effect.	500
Lensclass	String	CSS classes for Lenses	Cloudzoom-lens
Easetime (DEPRECATED V3.0)	Number	The time to enlarge the image when the mouse is sliding. The larger the number, the greater the easing, the 0 without easing.	500
Zoomposition	number | String	Zooms the window at the specified position if the position of the number (0-15) is relative to the page image by the following key (the blue squares represent the zoom window): If a string is supplied, the value is used as a selector to determine the exact location and size of the element of the page. If "Inside" is specified, then the enlarged image will appear in the page image, increased from 3.0 to 1303151613, you can also set to zoomoffsetx:0	3
Zoomoffsetx	Number	Allows you to adjust the horizontal position of the Zoom window. Increased from 3.0 to 1303151613 and in "inside" mode of operation	15
Zoomoffsety	Number	Allows you to adjust the vertical position of the Zoom window. Increased from 3.0 to 1303151613 and in "inside" mode of operation	0
ZoomfullsizeDEPRECATED (see Zoomsizemode)	Boolean	The Zoom window appears in a full-size enlarged image.	False
Zoomflyout	Boolean	Turn the ' flying ' animation on or off	True
Zoomclass	String	CSS class for zooming the window	Cloudzoom-zoom
Zoomsizemode	Srting	Defines the rules for zooming the window and the size of the lens. "Lens"--css lens (. Cloudzoom-lens) Priority, Zoom window will be adjusted "Zoom"--css (. cloudzoom-zoom) priority, lens will be adjusted "Full"--enlarges the window to maximize the size of the image "Image"--matching small Image Zoom window	Lens
Captionsource	String	Specifies an HTML attribute image in a page as the text caption. Optionally, specify a selector to use a title for some HTML content.	Title
Captiontype	String	Specifies the caption type, "attr" or "HTML"	attr
Captionposition	String	The position of the title, "Top" or "bottom"	Top
Uriescapemethod	Boolean | String	Specifies the JavaScript escape method to use, "escape" or "encodeURI" (false = no escaping), does not recommend using special characters or the image path has spaces	False
Errorcallback	function	Specifies a function that is called when an error occurs. The function will receive an Error object with the following properties: Type: String name error, currently only "Image_not_found" $element: Cloud zoom allows incorrect elements to be generated Data: error, such as file path not found for image You can set a global error handler before calling Cloudzoom.quickstart (), for example: $.fn.CloudZoom.defaults.errorCallback =  function(error){ alert(error.type); };  CloudZoom.quickStart();	Function (Error) {}
Variablemagnification (from V3.0)	Boolean	Whether the variable is allowed to enlarge	True
Startmagnification (from V3.0)	String|number	Initial magnification (small image size multiplier, do not give numbers in quotation marks). Auto will choose the best quality and enlarge it based on the large image size.	Auto
Minmagnification (from V3.0)	String|number	The minimum allowable magnification (the multiplier of the small image size). Auto will ensure that the lens size is not larger than the small image.	Auto
Maxmagnification (from V3.0)	String|number	Maximum allowable magnification (multiplier for small image size). "Auto" will choose the best quality based on large image size amplification	Auto
Easing (from V3.0)	Number	The larger the number, the smoother the movement, the slower it gets.	8
Lazyloadzoom (from V3.0 rev 1302181432)	Blooean	The zoom image that is loaded lazily. If this is true, the zoom image will only be loaded after the initial image interacts with the small image, otherwise the page load will be loaded immediately. If there are many magnified images that need to be loaded, lazy loading may be useful.	False
Mousetriggerevent (from V3.0 rev 1302271415)	String	Mouse events are used to trigger amplification. Use "MouseMove" or "click"	MouseMove
Disablezoom (from V3.0 rev 1303081245)	String|boolean	Use the disabled zoom. false = no disable, true = disable always, "auto" = disable only the zoom image is the same size or smaller than the small image. Note that if you have set the magnification level greater than 1,zoom will not be disabled.	False
Galleryhoverdelay (from 3.0 rev 1304251647)	Number	Using galleryevent: ' mouseover ' will delay changing the image number of milliseconds, preventing the image from loading the congestion caused by the request browser.	200
Permazoom (from 3.0 Rev 1308161049)	Boolean	If true, the Zoom window remains open when the mouse is drawn off the thumbnail	False
Zoomwidth Zoomheight (from 3.0 Rev 1311041015)	Number	Sets the width/height of the Zoom window and, if set to "Auto", the window width/height is consistent with the small picture width/height	0
Lenswidth Lensheight (from 3.0 Rev 1311041015)	Number	Set the width/height of the lens	0

jquery zoom jquery Magnifier effect