引入主要文件
<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