mouse wheel zoom image js

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

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

9 Responses to “mouse wheel zoom image js”

1. tiffany jewellery says:

   April 30, 2010 at 11:27 pm

   Great article, i

   hope can know much information About it!
2. mbt shoes says:

   May 6, 2010 at 9:49 am

   Thank you for your great

   content.
3. Avinash says:

   June 15, 2010 at 9:08 am

   This is very helpful ,

   Thanks for the script !!
4. Kulwant Singh says:

   October 18, 2010 at 8:23 pm

   I m very thankful to you,
   I got my requirment about mouse wheel zoom coding
5. Andrea says:

   March 29, 2011 at 4:23 pm

   Hallo, please help me with this code, dont know why its not working…why is the main script in head?
   And what i should change in the script to zoom my picture?
   Thank you for answer and have a nice day!!
6. admin says:

   April 11, 2011 at 8:15 pm

   
zooming.add(document.getElementById("test"));




   Please take care of the id ,hope this can help you to understand
7. Arihant says:

   May 9, 2011 at 4:04 am

   Does It support the SVG image format…Please Reply????
8. admin says:

   May 17, 2011 at 1:00 am

   i dont think so not tested
9. Henry says:

   January 27, 2012 at 9:39 pm

   I had been using some IE only wheel and image resizing code in a number of perl image display wrappers for many years and stumbled upon this while researching FF wheel detection techniques. It took me a bit of bumbling to get everything working the way I want it, but I finished my universal browser image resizer version today and wanted to thank you for your work on this, it helped a lot. In addition to wheel resizing, my version also has buttons to scale to width of page, height of page and several image percentages between 25% and 200%. It also will go back to original size OnDblClick and displays the original and current image WxH and zoom% as a div innerHTML.

   While I added about 100 lines of code, it is still smaller than my IE only versions so it’s a winner all the way round for me

   The non-IE users of my several sites will like this a lot!

• Search for:

  Enter your search terms

  Web bright your site Submit search form

• Categories

  • apache (2)
  • css xhtml (10)
  • html5 (1)
  • javascript (3)
  • jquery (5)
  • magento (3)
  • mysql (1)
  • php (1)
  • SEO Friendly (6)
  • Tools (3)
  • w3c validation (4)
  • Wordpress (4)