Posted By

grosbouff on 08/25/08


Tagged

resize image jquery scale


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

benrudolph
not_skeletor
jamesming
Hollow
wirenaught
Balamir


jQuery dynamic image resizer function


 / Published in: JavaScript
 

  1. /**
  2.  * scaleImage 0.1
  3.  *
  4.  * Rendez vos sites glissant !
  5.  *
  6.  * Copyright (c) 2008 Benoit G (http://www.tim-burton.net) based upon
  7.  * Licensed under the Creative Commons License:
  8.  * http://creativecommons.org/licenses/by/3.0/
  9.  *
  10.  * Date: 2008-08-25
  11.  */
  12.  
  13. (function($){
  14. $.fn.scaleImage = function(options) {
  15.  
  16. var defaults = {
  17. maxwidth: 200,
  18. linkclass:'',
  19. icon:true,
  20. thickbox:true
  21. };
  22. var options = $.extend(defaults, options);
  23.  
  24. return this.each(function() {
  25. obj = $(this);
  26.  
  27. var width = obj.width();
  28. var height = obj.height();
  29. if (width > options.maxwidth) {
  30. //Set variables for manipulation
  31. var ratio = (height / width );
  32. var new_width = options.maxwidth;
  33. var new_height = (new_width * ratio);
  34. var classes = options.linkclass+' scaleImage';
  35.  
  36. //thickbox
  37. if (options.thickbox == true) {
  38. var img_full_link = obj.attr('src');
  39. obj.wrap('<a class="thickbox" title="'+obj.attr('alt')+'" href="'+img_full_link+'"></a>');
  40. tb_init(obj.parent('a'));
  41. }
  42.  
  43. //Shrink the image and add link to full-sized image
  44. obj.height(new_height).width(new_width);
  45. obj.addClass(classes);
  46.  
  47. //zoom icon
  48. if (options.icon == true) {
  49. obj.after('<div class="thumb-zoom"> </div>');
  50. obj.hover(function(){
  51. $(this).next('.thumb-zoom').addClass("hover");
  52. },function(){
  53. $(this).next('.thumb-zoom').removeClass("hover");
  54. });
  55. }
  56.  
  57. }
  58. });
  59. };
  60. })(jQuery);

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: moksa23 on June 21, 2009

Hi ! It's a good function, thanks for it ! But how load it ? Sorry i'm a big noob :) i find for mozilla but don't work with IE. Thanks in advance.

Posted By: moksa23 on June 21, 2009

Hi ! It's a good function, thanks for it ! But how load it ? Sorry i'm a big noob :) i find for mozilla but don't work with IE. Thanks in advance.

Posted By: moksa23 on June 21, 2009

ok like it and it's work with IE now $(document).ready(function(){$('.bb-image').scaleImage();});

You need to login to post a comment.