Source code download, use guide address: http://www.mind-projects.it/projects/jqzoom/
Use the Tutorial:
1. Importing library files
<Scriptsrc=".. /js/jquery-1.6.js "type= "Text/javascript"></Script><Scriptsrc=".. /js/jquery.jqzoom-core.js "type= "Text/javascript"></Script><Linkrel= "stylesheet"href=".. /css/jquery.jqzoom.css "type= "Text/css">
2. Specify the HTML anchor element, the <a> tag, so that the area can generate enlarged images.
<class= "Clearfix">
- <a href=" images/bigimage. JPG " class=" MYCLASS " Title= "MYTITLE" >
- < img src=title=" Image title ">
- </ A>
</ Div >
Mandatory: The anchor element contains the picture you want to scale:
- Smallimage. JPG: Represents the small picture you want to zoom
- Bigimage. JPG: represents a large picture after zooming
- MYCLASS: represents the Anchor class, used to instantiate a jqzoom script that matches the class
- mytitle/image TITLE: Anchor title or picture caption can be used to display a zoom caption similar to the Jqzoom window.
3. Loading plugins
$ (document). Ready (function () {$ ('. MYCLASS '). Jqzoom (); });
4. Custom configuration plug-in properties
$ (document). Ready (function () { var options = { zoomtype: ' Standard ', lens:true, preloadimages:true, Alwayson:false, zoomwidth:300, zoomheight:250, xoffset:90, yoffset:30, position: ' Left ' //... More OPTIONS }; $ ('. MYCLASS '). Jqzoom (options); });
5. Support multiple thumbnail images
If you want to create a library, Jqzoom can help you manage the library.
@1. Declaring the primary anchor "rel" attribute
< a class = "MYCLASS" title = "MYTITLE" href = "images/bigimage. JPG " rel=" gal1 " > img title = "IMAGE title" src = "images/smallimage. JPG " > </ a >
@2. Managing your Thumbnail "class" and "rel" properties
<class= "zoomthumbactive" href= "javascript:void (0);" rel = "{gallery: 'gal1', Smallimage: './imgprod/smallimage1.jpg ', Largeimage: './imgprod/largeimage1.jpg '}" ><src= "Imgprod/thumbs/thumbimg1.jpg" ></a>
Jqzoom can add "zoomthumbactive" to the thumbnail image. By default, this class is assigned to the selected thumbnail.
The rel attribute in the thumbnail schema is very important and the basic properties are as follows:
Gallery: Owning gallery ID
smallimage: execute smallimag path when clicking on thumbnail image
largeimage: Path to Largeimag
Rel= "{gallery: ' Gal1 ', Smallimage: './imgprod/smallimage1.jpg ', Largeimage: './imgprod/largeimage1.jpg '}"
Detailed configuration:
Zoomtype, default: Standard, the selected area obscures the matte with a translucent layer, reverse the original with a translucent layer. Innerzoom, display the enlarged effect in the area of the small map drag can be dragged to display the magnification effect
Zoomwidth, default value: 200, enlarges the width of the window
Zoomheight, default value: 200, magnification window height
Xoffset, default value: 10, the X-axis offset value of the magnification window relative to the original
Yoffset, default value: 0, the y-axis offset value of the magnification window relative to the original
AlwaysOn, default: False Magnifier always shows that the presence of ' true ' always shows false only when the mouse is moved
position, the default value: ' Right ', enlarge the window position, the value can also be: ' Right ', ' left ', ' top ', ' bottom '
lens, default: True, if false, the lens is not displayed on the original
imageopacity, the default value: 0.2, when the value of Zoomtype is ' reverse ', this parameter is used to specify the opacity of the matte (the smaller the value, the lower the opacity)
title, default: True, displays the caption in the magnification window, the value can be the title value of the A tag, or, if none, the title value of the original
preloadimages, default value True, preload large picture showeffect, default: ' Show ', display the effect when magnification window, value can be: ' Show ', ' Fadein ' hideeffect, Default: ' Hide ', hide magnification window effect: ' Hide ', ' Fadeout ' (both without Debugging) Fadeinspeed, default: ' Fast ', magnification window fade speed (option: ' Fast ', ' slow ', ' Medium ') fadeoutspeed, default: ' Slow ', magnification window's fade speed ( Option: ' Fast ', ' slow ', ' Medium ') showpreload, default: True, whether to display load prompt Loading zoom (option: ' True ', ' false ') Preloadtext, default: ' Loading Zoom ', custom loading hint text preloadposition, default value: ' Center ', load hint location, value can also be ' bycss ' to specify location plugin via CSS source code: Http://pan.baidu.com/s/1mg2xFZE
jquery Magnifier plug-in jqzoom use