Как изменить размер изображения с помощью 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);
    });
});

Демо

Answer 2

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

<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

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();
    });

Answer 4

Привет, Андерс. Попробуйте использовать консоль 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>