Javascript Zoom On Different Tabs

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 success

Solution 1:

you need to use different ID's

var img=document.getElementById("pic1");
var img=document.getElementById("pic2");`

Solution 2:

You have assigned all three images the same id (id="pic"). You can't do that, ids must be unique.

If you change their ids, (ex: pic, pic2, pic3), and pass that in to your zoom function as an argument, then all the tabs will zoom.

So change the zoom function to look like this:

function zoom(zm, id) {
  var img=document.getElementById(id);
  ...
}

And make your html look like this (just one for an example):

<div id="tabs-2">
  <input type="button" value ="-" onClick="zoom(0.9, 'pic2')"/>
  <input type="button" value ="+" onClick="zoom(1.1, 'pic2')"/>

  <div id="thediv">
   <img id="pic2" src="http://stereo-ssc.nascom.nasa.gov/beacon/t0193.jpg"/>
  </div>
</div> 

Now all three will zoom individually. Here's a jsbin showing it.

But, there's a bug. The variable you use to track the zoom state is being shared between the tabs. This means the "zoom limit" is not really enforced: you can just zoom one tab all the way down, then the next tab all the way up. Repeat this to make any of the images as big or as small as you want. I don't think this is what you want, but I'm going to leave it an exercise for you to fix.