MagicZoomPlus、Magic Zoom放大镜参数说明

 第一种方式：magiczoomplus效果

 

html代码为：

<div class="danpin_colLef">
    <div class="danpinColCenter">
        <div class="bigImg" id="vertical">
            <a href="{$pictures.0.img_url}" class="MagicZoomPlus" id="Zoomer" rel="hint-text: ; selectors-effect: false; selectors-class: onlickImg;selectors-change: mouseover; zoom-distance: 22;zoom-width: 380; zoom-height: 380;"><img id="midimg" src="{$goods.goods_img}" title="{$goods.goods_name|escape:html}"></a>
            <div id="winSelector" style="left: 0px; top: 36px; display: none; "></div>
        </div>
    </div>
    <div class="danpinLeft">
        <div class="smallImg">
            <div class="smallImgUp upper"></div>
            <div class="imageMenu">
                <ul id="imageMenu">
                    {if $pictures} 
                    {foreach from=$pictures item=picture}
                    <li class="track"><center><a class="SpriteSmallImgs" href="{if $picture.img_url}{$picture.img_url}{else}{$picture.thumb_url}{/if}" rel="zoom-id: Zoomer" rev="{if $picture.img_url}{$picture.img_url}{else}{$picture.thumb_url}{/if}"><img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}"></a></center></li>
                    {/foreach} 
                    {/if}
                </ul>
            </div>
            <div class="smallImgDown downHover"></div>
        </div>
    </div>   
</div>

本地效果为：http://svn.chenhua.cc/project/fenzhidao/goods.html

 magiczoomplus参数说明：

 

 

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