problem with picture zoom in

Question

I have a small picture which would zoom in if it's clicked on, the zoom in function work s when I'm using 17" laptop screen, but the zoomed in picture dosen't appear completely when I'm using a different size screen.when used on mac it's the same problem.

I was just wondering if there was a way to make it look the same in all different size windows.

you can see the site here, if you click on small picture and then click on the bigger pictures on the left you can zoom in, link text

thanks for your help.

<div class="small_product" id="small_product1">
        <img id="small_product1-1" src="images" />
        <img id="small_product1-2" src="images" />
</div>

<div class="big_product" id="big_product1-1">
        <img id="thumbnail1-1" src="#" />
        <img id="full1-1" src="#" />
</div>



    $(function() {

       var fullWidth = 950; // Width in pixels of full-sized image
       var fullHeight = 1000; // Height in pixels of full-sized image
       var thumbnailWidth = 320;  // Width in pixels of thumbnail image
       var thumbnailHeight = 480;  // Height in pixels of thumbnail image

    // Toggle full and thumbnail pictures on click
       $('#big_product1-1').click(function() {
                    $('#thumbnail1-1').toggle();
                        $('#full1-1').toggle();     
       });

    // Do some calculations
    $('#big_product1-1').mousemove(function(e) {


  var mouseX=0;var mouseY=0;var posX=0;var posY=0;

      //detect safari on Mac
      var browser=navigator.userAgent;
      if (browser.toLowerCase().indexOf('macintosh') > 0) {
          mouseX = (e.screenX-200) - $(this).attr('offsetLeft');
          mouseY = (e.screenY-200) - $(this).attr('offsetTop'); 
      }else  {                                          
          mouseX = (e.screenX-300) - $(this).attr('offsetLeft'); 
          mouseY = (e.screenY-300) - $(this).attr('offsetTop'); 
      }
      posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
      posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);




        $('#full1-1').css({
                         'left': '-' + posX + 'px',
                         'top': '-' + posY + 'px'
                          });
  });
});

Answer 1

The diagonal size of the monitor is meaningless, really. It appears from your code that you have hard coded the pixel width and height. When you do this, it becomes entirely dependent on the resolution settings that the end user is using on that particular monitor. If you're going to hard code pixel width/heighth you will never get the image to appear the same across all monitors. You would have to, instead, come up with a way of determing the current resolution of the monitor and adjusting your picture size accordingly as a relative amount of the current monitor's resolution.