Image Zoommer like E-commerce site using multizoom.js | 2my4edge

02 July 2013

Image Zoommer like E-commerce site using multizoom.js

Usually we need this kind of image zoom is using in E-commerce site, Why because, they want to show their product with some extra quality, that’s why they are using this image zoom on their product, here we are going to see how the image zoom get works.
IMAGE ZOOM

CODE

<img id="image1" border="0" src="images/1.jpg" style="width:200px;height:120px">
<img id="image2" border="0" src="images/2.jpg" style="width:200px;height:120px">
<img id="image3" border="0" src="images/3.jpg" style="width:200px;height:120px">

as like the above code, just locate the image using img tag and give id to all the image, here i'm using id="image1" and image2, image3". for this image just call the JQuery for all image. let see the scripts.

SCRIPT

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="multizoom.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
    $('#image1').addimagezoom({ 
        zoomrange: [3,3],
        magnifiersize: [300,300],
        magnifierpos: 'right',
        cursorshade: false,
        largeimage: 'images/1.jpg'
    })


    $('#image2').addimagezoom({ 
        zoomrange: [3,3],
        magnifiersize: [300,300],
        magnifierpos: 'right',
        cursorshade: 'ture',
        largeimage: 'images/2.jpg'
        
    })
    
    $('#image3').addimagezoom({
        magnifiersize: [300,300],
        magnifierpos: 'right',
        cursorshade: 'ture',
        largeimage: 'images/3.jpg'
        
    })

})

</script>

like the above script we should include jquery min file and multizoom.js. call image id with addimagezoom.
and magnifiersize is for give the size for image magnification. and magnifierpos is for position left or right. and cursorshade is for give the shade of cursor shadow. and locate largeimage location.

let enjoy with the demo. that's it.


RELATED POSTS:







2 comments:

^