Javascript Zoom on different tabs

nuphero

New Member
I have made a simple zoom in and out function with button as well as mousewheel function. The main concept is to limit the maximum zoom level and minimum zoom level.I have successfully made it in two waysBIN 1BIN 2But i tried to make this in a tab section with unique ID or by class.My script\[code\] var zoomLevel = 100; var maxZoomLevel = 150; var minZoomLevel = 50; var initW=0,initH=0; function zoom(zm) {var img=document.getElementById("pic");if(zm > 1){ if(zoomLevel < maxZoomLevel){ zoomLevel+=10; }else{ return; }}else if(zm < 1){ if(zoomLevel > minZoomLevel){ zoomLevel-=10; }else{ return; }}img.style.width = (initW*zoomLevel/100)+"px";img.style.height = (initH*zoomLevel/100)+"px";img.style.marginLeft = ((initW-img.width)/2) + "px";img.style.marginTop = ((initH-img.height)/2) + "px";}window.onload=function(){ var img=document.getElementById("pic"); initW=img.width; initH=img.height; img.onmousewheel=function(e){e=e||window.event;if(e.wheelDelta>=120) zoom(1.1);else zoom(0.9);};if(/Firefox/.test(navigator.userAgent)){img.addEventListener("DOMMouseScroll",function(e){ if(e.detail<0) zoom(1.1); else if(e.detail>0) zoom(0.9); e.preventDefault(); },false); } }; \[/code\]Here i am getting my element by using GetElementById to access my image tag is there any way to get access all the img tags in other tabs too.I also tried getElementsbyClassName but its not working it just retrieving the nodeslist.How can i access all three images hereMy Working BIN
 
Back
Top