Posted By

ryarwood on 11/02/11


Tagged

javascript resize image jquery automatic


Versions (?)

jQuery Image Resize


 / Published in: JavaScript
 

  1. (function( $ ){
  2. $.fn.resize = function(max_size)
  3. {
  4. return this.each(function()
  5. {
  6. //Wait until the image is loaded
  7. $(this).load(function()
  8. {
  9. //Create a container div
  10. var div_container = $("<div></div>");
  11. div_container.css({'width': max_size});
  12.  
  13. //Get the new size of the image
  14. if ($(this).height() > $(this).width())
  15. {
  16. var h = max_size;
  17. var w = Math.floor($(this).width() / $(this).height() * max_size);
  18. }
  19. else
  20. {
  21. var w = max_size;
  22. var h = Math.floor($(this).height() / $(this).width() * max_size);
  23. }
  24.  
  25. //Centralize the image
  26. //var top = Math.floor((120-h)/2);
  27. //var left = Math.floor((120-w)/2);
  28.  
  29. //Resize the image and put it in the container div
  30. $(this).css({ 'height': h, 'width': w});
  31. $(this).parent().append(
  32. div_container.append($(this).detach())
  33. );
  34.  
  35. });
  36. });
  37. };
  38. })( jQuery );

Report this snippet  

You need to login to post a comment.