Как изменить размер изображения с помощью jquery

Question

Я хочу изменить размер img на функцию щелчка. Вот мой код, который в настоящее время не работает. Я не уверен, что я делаю это правильно, любая помощь будет отличной.

<script> 
$(document).ready(function(){ 
$("#viewLarge").click(
function(){ 
    $("#newsletter").width("950px"); 
}); 
}); 
</script> 
<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a> 
<img id='newsletter' width='630px' src='images/news/hello.jpg'> 

Answer 1

В источника HTML, не указывайте width="630". Вместо этого используйте встроенный CSS для указания ширины, поскольку jQuery.width() будет манипулировать шириной CSS. Кроме того, введите число без единицы (% или px) в функцию jQuery.width().

HTML

<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a> 
<img id="newsletter" style="width: 630px" src='http://farm3.static.flickr.com/2475/4008724345_56506c8183_b.jpg'> 

JavaScript

$(document).ready(function() { 
    $("#viewLarge").click(function() { 
     $("#newsletter").width(950); 
    }); 
}); 

Demo

Answer 2

Возможно, эта страница перезагружается, поскольку вы не предотвращаете действие по умолчанию для ссылки. Попробуйте добавить return false; после установки ширины, чтобы ссылка не была сделана. Вы действительно должны переписать его, используя стиль, а не атрибут ширины, хотя при тестировании это, похоже, не имеет значения. Использование следующего кода (но замена вашего изображения одним из моих) отлично работало для меня.

<script> 
$(document).ready(function(){ 
$("#viewLarge").click( 
    function(){ 
     $("#newsletter").width("950px"); 
     return false; 
    }); 
}); 
</script> 
<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a> 
<img id='newsletter' src='images/news/hello.jpg' style="width: 630px;"> 

Answer 3

Эй, Андерс. Попробуйте использовать консоль firebug, как говорит вышеперечисленный парень. Сначала вам нужно включить его, но он поймает ваши ошибки. Вы также можете попробовать консоль ошибок с Ctrl + Shift + J, которая встроена в firefox и большинство других браузеров.

Что касается вашего кода, это отлично работает для меня.

<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a> 
<img id='newsletter' width='630' height='250' src='http://www.google.ca/intl/en_com/images/srpr/logo1w.png'> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script> 
$(document).ready(function(){ 
    $("#viewLarge").click(function(){ 
     $("#newsletter").css('width', '950px'); 
    }); 
}); 
</script> 

Answer 4

Try This : jQuery image resize code(working with all browser) 

/* 
Here is Start Image Resize Code 
*/ 
function image_resize() { 
    $("your-class-or-id img").each(function() { 
      /* Max width for the image */ 
      var maxWidth = 230; 
      /* Max hieght for the image */ 
      var maxHeight = 230; 
      /*Used for aspect ratio*/ 
      var ratio = 0; 
      /*Current image width*/ 
      var width = $(this).width(); 
      /*Current image height */ 
      var height = $(this).height(); 

      /*Check if the current width is larger than the max*/ 
      if (width > maxWidth) { 
       /*get ratio for scaling image*/ 
       ratio = (maxWidth/width); 
       /* Set New hieght and width of Image*/ 
       $(this).attr({ 
         width : maxWidth, 
         height : (height * ratio), 
         alt : "your-alt-text-you-can-remove-this" 
        }); 
       /* Reset height to match scaled image */ 
       height = (height * ratio); 
       /* Reset width to match scaled image */ 
       width = (width * ratio); 
       /*Check if current height is larger than max*/ 
       if (height > maxHeight) { 
        /*get ratio for scaling image*/ 
        ratio = (maxHeight/height); 
        /*Set new height and width*/ 
        $(this).attr({ 
          height : maxHeight, 
          width : (width * ratio), 
          alt : "your-alt-text-you-can-remove-this" 
         }); 

       } 
      } 
     }); 
} 

/* 
Here is End Image Resize Code 
*/ 

/* 
How can we call this Function 
*/ 

/* Start $(document).ready function() */ 
$(document).ready(function() { 
     /* Call Function For image Resize (Not for Webkit Browser) */ 
     image_resize(); 
    }); 
/* End $(document).ready function(*/ 

/* Call Function (for Webkit Browser like safari and Chrome) */ 
$(window).load(function() { 
     image_resize(); 
    });