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:







7 comments:

  1. But how can i create gallery or click events.

    ReplyDelete
  2. Thank you so much it is helpful :)

    ReplyDelete
  3. It is really helpful, Thank you so much :)

    ReplyDelete
  4. Great things you’ve always shared with us. Just keep writing this kind of posts.The time which was wasted in traveling for tuition now it can be used for studies.Thanks e-commerce outsourcing companies

    ReplyDelete
  5. I read a article under the same title some time ago, but this articles quality is much, much better. How you do this.. ecommerce agency china

    ReplyDelete
  6. suncoast 48re rebuild kit I am impressed. I don't think Ive met anyone who knows as much about this subject as you do. You are truly well informed and very intelligent. You wrote something that people could understand and made the subject intriguing for everyone. Really, great blog you have got here.

    ReplyDelete

^