JQuery : Dynamic Image Resize

나는 wordpress에 대한 반응이 빠른 테마를하려고 노력 중이다. 준비를 위해 JQuery를 사용하여 크기 조정 스크립트를 작성하여 필요할 때 동적으로 조정합니다.JQuery : Dynamic Image Resize

<html> 
<head> 
<script type="text/javascript" src="jquery.js" ></script> 
<? 
class generate_image { 

    var $image; 

    function __construct($getimage) { 
     $this->image = $getimage; 
    } 

    function display() { 
     $wrapper = '<img id="sample" src="' . $this->image . '">'; 
     return $wrapper; 
    } 


} 
$view = new generate_image("sample.jpg"); 
?> 

<script language="javascript" type="text/javascript"> 
    var resize = { 
    bindimage: function (containerid) { 
      var width = $(containerid).width(); 
      var height = $(containerid).height(); 

      var maxwidth = 1291; 
      $(window).resize(function(){ 

       var percent = $(window).width()/maxwidth; 
       var now_height = height * percent; 
       var now_width = width * percent; 

       $('img').attr('height', now_height); 
       $('img').attr('width', now_width); 

       $('.win_height').text("Windows Height: " + $(window).height()); 
       $('.win_width').text("Windows Width: " + $(window).width()); 

       $('.img_height').text("Image Height: " + $('img').height()); 
       $('.img_width').text("Image Width: " + $('img').width()); 

       $('.win_calcu').text("Image Width: " + now_height); 
      });//end of resize 
     }//end of bind function 

    }//end of object 

    $(document).ready(function(){ 
     resize.bindimage('img'); 
    }); 
    </script>* 
    </head> 
    <body> 
    <div> 

    <div class="image"> 
    <? echo $view->display(); ?> 
    </div> 
    <div class="information"> 
    <table> 
    <tr> 
    <td> 
    <p class="img_height">Image Height</p> 
    </td> 
    <td> 
    <p class="img_width">Image Width </p> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <p class="win_height">Window Height</p> 
    </td> 
    <td> 
    <p class="win_width">Window Width</p> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <p class="win_calcu"></p> 
    </td> 
    </tr> 
    </table> 
    </div> 

    </div> 
    </body> 
    </html>

의견이 있으십니까? IE9에서는 작동하지만 Chrome에서는 작동하지 않습니다. 일단 크기를 조정하면 높이와 너비가 0으로 설정됩니다.

출처

2012-01-04 Mr A

는

$(window).load(function(){ 
    resize.bindimage('img'); 
});

또한 가변 폭의 범위를 체크 아웃 (창) .load() 이벤트 또한 $에 함수를 호출하려고 변수

var now_height = parseInt(height * percent); 
var now_width = parseInt(width * percent);

now_width, now_height에 정수를 설정해보십시오 높이를 크기 조절 기능 내에서 사용하고 있지만 읽을 수는 없습니다 ... 코드를 다음과 같이 변경하십시오.

<script language="javascript" type="text/javascript"> 
var width = 0; 
var height = 0; 
var resize = { 
bindimage: function (containerid) { 
     width = $(containerid).width(); 
     height = $(containerid).height();

출처

2012-01-04 08:47:15 alex

작동합니다. 그러나 해상도를 화면에 표시 할 때 축소되지 않습니다. –

다른 문제가 발견되었습니다. 지금 작동하게되기를 바랍니다. – alex

if 함수 B는 함수 A에 중첩되어 있습니다. 함수 A의 변수는 함수 B에서 읽을 수 없습니까? –

JQuery : Dynamic Image Resize

답변

관련 문제