2009-12-03 3 views
0

클릭 한 경우 확대 할 작은 그림이 있습니다. 17 "노트북 화면을 사용할 때 확대 기능이 작동하지만 축소 된 그림은 완전히 나타나지 않습니다. '이 같은 문제의 Mac에서 사용되는 다른 크기 screen.when을 사용하고 있습니다.그림 확대 문제

은 모든 다른 크기의 창에서 동일하게 보이게 할 수있는 방법이 있다면 난 그냥 궁금 해서요

.

당신이 볼 수 있습니다 작은 그림을 클릭 한 다음 왼쪽의 큰 그림을 클릭하면 확대 할 수 있습니다. link text

감사합니다.

<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' 
          }); 
    }); 
}); 
+0

더 쉽게 읽을 수 있도록 첫 번째 형식 코드 – jitter

답변

0

모니터의 대각선 크기는 실제로 의미가 없습니다. 코드에서 픽셀 너비와 높이를 하드 코딩 한 것으로 나타납니다. 이렇게하면 최종 사용자가 특정 모니터에서 사용하는 해상도 설정에 전적으로 의존하게됩니다. 픽셀 너비/높이를 하드 코딩하면 모든 모니터에서 동일한 이미지가 나타나지 않습니다. 대신 모니터의 현재 해상도를 결정하고 현재 모니터의 해상도의 상대적 크기에 따라 그림 크기를 조정하는 방법을 찾아야합니다.

+0

안녕하십니까, 답장을 보내 주셔서 감사합니다. 사진이 다른 해상도에서 동일하지 않습니다. 확대 할 수있는 다른 방법이 있습니까? – amir