Jquery MultiZoom插件无法正常工作

Question

我正在尝试缩放图像。 我已经加载了4张图片。 在一个主要部分我拍了1张大图。 在它上面我拍了拇指图像。 当我点击拇指图像时，图像将单独打开，如下所示：

我想在主Image div中打开Image：

为什么图像在点击时打开，我不知道。 我想在大图像的主要div中打开图像。

代码主图片：

    <div id="productmainimage" class="targetarea">
<a href="#"> 
<img id="mainimg" name="mainimg" alt="No Image Available" src="http://localhost:8080/B2B_Solution/product_images/Tulips1760331818.jpg" height="330px" width="290px" style="border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; visibility: visible; opacity: 1; width: 290px; height: 330px;"> 
</a>
    </div>

Thumb Image Div：

<div id="mainimg thumbs" style="margin-left: 25px;">
<a href="product_images/Tulips1760331818.jpg" data-dims="290, 330">
<img src="product_images/Tulips1760331818.jpg" height="45" width="55">
</a>
<a href="product_images/MvcCaptchaGoogle1450547827.jpg" data-dims="290, 330" data-large="product_images/MvcCaptchaGoogle1450547827.jpg" data-title="L32840">
<img src="product_images/MvcCaptchaGoogle1450547827.jpg" height="45" width="55">
</a>
<a href="product_images/nokia-lumia-800n1558615039.jpg" data-dims="290, 330" data-large="product_images/nokia-lumia-800n1558615039.jpg" data-title="L32840">
<img src="product_images/nokia-lumia-800n1558615039.jpg" height="45" width="55">
</a>
<a href="product_images/lumia-music866211759.jpg" data-dims="290, 330" data-large="product_images/lumia-music866211759.jpg" data-title="L32840">
<img src="product_images/lumia-music866211759.jpg" height="45" width="55">
</a>            
</div>

jQuery：

jQuery(document).ready(function($){

                $('#mainimg').addimagezoom({ // single image zoom
                    zoomrange: [1, 2],
                    magnifiersize: [290,330],
                    magnifierpos: 'right',
                    cursorshade: true,
                });             
            })

我使用过multizoom.js

Answer 1

请尝试以下代码

<script type="text/javascript">


jQuery(document).ready(function($){


$('#image1').addimagezoom({ // single image zoom
    zoomrange: [3, 10],
    magnifiersize: [300,300],
    magnifierpos: 'right',
    cursorshade: true,
    largeimage: 'hayden.jpg'
})

})



</script>

更多选项如下

descArea: '#description', // description selector (optional - but required if descriptions are used)
descpos: true, // if set to true - description position follows image position at a set 

distance, defaults to false (optional)

imagevertcenter: true, // zoomable image centers vertically in its container (optional)

magvertcenter: true, // magnified area centers vertically in relation to the zoomable image (optional)

zoomrange: [3, 10],
magnifiersize: [250,250],
magnifierpos: 'right',
cursorshadecolor: '#fdffd5',
cursorshade: true,
disablewheel: true