Comment redimensionner une image avec jquery

Question

Je souhaite redimensionner une image sur une fonction de clic. Voici mon code qui ne fonctionne pas actuellement. Je ne suis pas sûr si je le fais correctement du tout, n'importe quelle aide serait grande.

<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

Dans votre source HTML, ne spécifiez pas width="630". Utilisez plutôt CSS en ligne pour spécifier la largeur car jQuery.width() manipulera la largeur CSS. En outre, fournissez un nombre sans l'unité (% ou px) à la fonction 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

Il se peut que la page soit en train de se recharger car vous n'empêchez pas l'action par défaut du lien. Essayez d'ajouter return false; après avoir défini la largeur afin que le lien ne soit pas pris. Vous devriez vraiment le réécrire en utilisant un style plutôt qu'un attribut de largeur, même si en le testant, cela n'a pas semblé important. En utilisant le code suivant (mais en remplaçant votre image avec l'un des miens) a bien fonctionné pour moi.

<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. Essayez d'utiliser la console firebug comme le type ci-dessus parle. Vous devrez l'activer en premier, mais il détectera vos erreurs. Vous pouvez également essayer la console d'erreur avec Ctrl + Shift + J qui est intégré dans Firefox et la plupart des autres navigateurs.

En ce qui concerne votre code, cela fonctionne très bien pour moi.

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