How to resize a image with jquery

Question

I want to resize a img on a click function. Here is my code that is currently not working. I am not sure if I am doing this correctly at all, any help would be great.

<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

In your HTML source, do not specify width="630". Instead use inline CSS to specify width since jQuery.width() will manipulate CSS width. Also, supply a number without the unit (% or px) to the jQuery.width() function.

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

It could be that the page is reloading because you aren't preventing the default action of the link. Try adding return false; after setting the width so that the link isn't taken. You really ought to rewrite it using style rather than a width attribute, although in testing it, it didn't seem to matter. Using the following code (but replacing your image with one of mine) worked fine for me.

<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

Hey, Anders. Try using the firebug console like the guy above is talking about. You'll have to enable it first, but it will catch your errors. You can also try the error console with Ctrl+Shift+J which is built into firefox and most other browsers.

In regards to your code, this works fine for me.

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