jquery Magnifier plug-in jqzoom use

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">

1. <a href=" images/bigimage. JPG " class=" MYCLASS "  Title= "MYTITLE" >  
2.     < img src=title=" Image title ">  
3. </ 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