jQuery dynamic image resizer function


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  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

You need to login to post a comment.