Advanced Search

jQuery dynamic image resizer function

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

Expand | Embed | Plain Text

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.