mouse wheel zoom image js

Intorduce

Mouse wheel zoom image js , It’s simple , easy to use and compliant with IE6-8,FF,Chrome,Opera,Safari . no more than 50 lines of codes .

How to use ?

Insert following codes between <head> and </head>

<script type="text/javascript">
(function(){
 
var zooming=function(e){
    e=window.event ||e;
    var o=this,data=e.wheelDelta || -e.detail*40,zoom,size; 
    if(!+'\v1'){//IE
        zoom = parseInt(o.style.zoom) || 100; 
        zoom += data / 12;
        if(zoom > zooming.min) 
            o.style.zoom = zoom + '%';
        e.returnValue=false;
    }else {
        size=o.getAttribute("_zoomsize").split(",");
        zoom=parseInt(o.getAttribute("_zoom")) ||100;
        zoom+=data/12;
        if(zoom>zooming.min){
            o.setAttribute("_zoom",zoom);
            o.style.width=size[0]*zoom/100+"px";
            o.style.height=size[1]*zoom/100+"px";
        }
        e.preventDefault(); 
        e.stopPropagation();//for firefox3.6
    }
};
zooming.add=function(obj,min){// first parameter is for the image need to zoom ,min define the image zoom size ,default to 50
    zooming.min=min || 50;
    obj.onmousewheel=zooming;
    if(/Firefox/.test(navigator.userAgent))//if Firefox
        obj.addEventListener("DOMMouseScroll",zooming,false);
    if(-[1,]){//if not IE
        obj.setAttribute("_zoomsize",obj.offsetWidth+","+obj.offsetHeight);
    }
};
 
window.onload=function(){//must be onload , in order to get the image size
    zooming.add(document.getElementById("test"));
}
})()
</script>

Please take a notice to zooming.add(document.getElementById(“test”)); ,that’s where you need change to add your image which suposed to be zoom. the ‘test’ is the image id.

html body codes :

 <img alt='' id='test' src="../demo/pflimg/bcms.gif" />

Online demo

mouse wheel zoom image js

Mouse over on the image and scroll your mouse wheel , ye ! that’s what you are looking for , enjoy it !


, I'm a freelancer and available now,if need help just contact me without hesitation.


Posted by admin in: javascript
  • RSS
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • co.mments
  • YahooMyWeb
  • E-mail this story to a friend!

3 Responses to “mouse wheel zoom image js”

  1. Great article, i

    hope can know much information About it!

  2. mbt shoes says:

    Thank you for your great

    content.

  3. Avinash says:

    This is very helpful ,

    Thanks for the script !!

Leave a Reply


valid-xhtml10 css2.1 valid © BrightYourSite.com All Right Reaserved