Magic Zoom 使用说明
引入主要文件
<link type="text/css" rel="stylesheet" href="magiczoom.css"/><script type="text/javascript" src="magiczoom.js"></script>
结构
单图片结构（中图+大图）
<a href="big.jpg" class="MagicZoom"><img src="small.jpg"/></a>
（其中class="MagicZoom"为关键项）
多图片结构（小图+中图+大图）
主图：<a href="dbig.jpg" class="MagicZoom" id="rabbit"><img src="small.jpg"></a>
附加图：<a href="addimg_big.jpg" rel="zoom-id:rabbit" rev="addimg_mid.jpg"><img src="addimg_small.jpg"/></a>
<a href="addimg2_big.jpg" rel="zoom-id:rabbit" rev="addimg2_mid.jpg"><img src="addimg2_small.jpg"/></a>
（为主图添加id属性，附加图添加rev指向中图，通过rel="zoom-id:rabbit"确立联系）
参数设置
为rel属性设置参数列表，如
<a href="big.jpg" class="MagicZoom" rel="zoom-width:118px; zoom-height:118px"><img src="small.jpg"/></a>
特例：自定义显示框位置
<a href="big.jpg" class="MagicZoom" id="elephant" rel="zoom-position: custom><img src="small.jpg"/></a>
<div id="elephant-big"></div>
样式设置
在magiczoom.css添加自定义样式
设置显示框样式
.MagicZoomBigImageCont {
border: none;
}
设置抓图区样式
.MagicZoomPup {
border: 2px solid #658EC2;
background: #658EC2 url(dotted.png);
cursor: move;
}
参数列表
| Parameter | Default | Options | Description |
|---|---|---|---|
| Geometry | |||
| zoom-width | 300 | Width of zoom window (px) | |
| zoom-height | 300 | Height of zoom window (px) | |
| zoom-position | right | left / right / top / bottom / inner /custom | Position of zoom window |
| zoom-distance | 15 | Distance from small image to zoom window (px) | |
| User experience | |||
| opacity | 50 | 0-100 | Opacity of hovered area |
| opacity-reverse | false | true / false | Add opacity outside mouse box |
| smoothing | true | true / false | Enable smooth zoom movement |
| smoothing-speed | 40 | 1-99 | Speed of smoothing |
| fps | 25 | Frames per second for zoom effect | |
| show-title | top | top / bottom / false | Show the title of the image in the zoom window |
| zoom-fade | false | true / false | Zoom window fade effect |
| zoom-fade-in-speed | 400 | Zoom window fade-in speed (ms) | |
| zoom-fade-out-speed | 200 | Zoom window fade-out speed (ms) | |
| Multiple images | |||
| thumb-change | click | click / mouseover | Multiple images change on click/mouseover |
| selectors-mouseover-delay | 200 | Delay before switching thumbnails (ms) | |
| selectors-effect | dissolve | dissolve / fade / false | Dissolve or cross fade thumbnails |
| selectors-effect-speed | 400 | Speed of dissolve/fade effect (ms) | |
| preload-selectors-small | true | true / false | Multiple images, preload small images |
| preload-selectors-big | false | true / false | Multiple images, preload large images |
| Initialization | |||
| click-to-initialize | false | true / false | Click to fetch the large image |
| click-to-activate | false | true / false | Click to show the zoom |
| show-loading | true | true / false | Loading message |
| loading-msg | Loading zoom... | Loading message text | |
| loading-opacity | 75 | 0-100 | Loading message opacity |
| loading-position-x | -1 | Loading message X-axis position, -1 is center | |
| loading-position-y | -1 | Loading message Y-axis position, -1 is center | |
| Zoom mode | |||
| drag-mode | false | true / false | Click and drag to move the zoom |
| move-on-click | true | true / false | Click to move the zoom (in drag mode) |
| preserve-position | false | true / false | Remember position of zoom for multiple images and drag mode |
| x | -1 | Initial X-axis position for drag mode, -1 is center | |
| y | -1 | Initial Y-axis position for drag mode, -1 is center | |
| always-show-zoom | false | true / false | Make zoom window always visible. (Automatically true in drag-mode.) |
| fit-zoom-window | true | true / false | Resize zoom window if big image is smaller than zoom window |
| entire-image | false | true / false | Show the entire large image on hover |
