CODEWITHSUNDEEP
jqueryimagezooming
Java Curious ღ
Java Curious ღ

Reputation: 3702

Jquery MultiZoom Plugin Not Working Properly

I am trying to zoom image. I have loaded 4 images. In one main div I have taken 1 large image. Upon it I have taken thumb images. When I am clicking on thumb Image, Image opens separately like following : enter image description here

I want to open Image in main Image div :

enter image description here

Why Image Opens like that on click I don't know. I want to open Image in main div of large image.

Code Main Image :

    <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,
                });             
            })

I have used multizoom.js

Upvotes: 0

Views: 1153

Answers (1)

Indranil.Bharambe
Indranil.Bharambe

Reputation: 1498

please try following code

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

more options are as follows

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

Upvotes: 1

Related Questions