problem with picture zoom in
<p>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.</p>

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

<p>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, <a href="http://www.stylelusthaves.com/test/straight%5Fleg.php" rel="nofollow">link text</a></p>

<p>thanks for your help.</p>

<pre><code>&lt;div class="small_product" id="small_product1"&gt;
        &lt;img id="small_product1-1" src="images" /&gt;
        &lt;img id="small_product1-2" src="images" /&gt;
&lt;/div&gt;

&lt;div class="big_product" id="big_product1-1"&gt;
        &lt;img id="thumbnail1-1" src="#" /&gt;
        &lt;img id="full1-1" src="#" /&gt;
&lt;/div&gt;



    $(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') &gt; 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'
                          });
  });
});
</code></pre>
