Return to Snippet

Revision: 7965
at January 19, 2009 17:15 by grosbouff


Updated Code
/**
 * scaleImage 0.1
 * 
 * Rendez vos sites glissant !
 *
 * Copyright (c) 2008 Benoit G (http://www.tim-burton.net) based upon
 * Licensed under the Creative Commons License:
 * http://creativecommons.org/licenses/by/3.0/
 *
 * Date: 2008-08-25
 */
 
	(function($){
		$.fn.scaleImage = function(options) {

			var defaults = {
			maxwidth: 200,
			linkclass:'',
			icon:true,
			thickbox:true
			};
			var options = $.extend(defaults, options);

			return this.each(function() {
				obj = $(this);

				var width = obj.width();
				var height = obj.height();
				if (width > options.maxwidth) {
					//Set variables	for manipulation
					var ratio = (height / width );
					var new_width = options.maxwidth;
					var new_height = (new_width * ratio);
					var classes = options.linkclass+' scaleImage';

					//thickbox
					if (options.thickbox == true) {
						var img_full_link = obj.attr('src');
						obj.wrap('<a class="thickbox" title="'+obj.attr('alt')+'" href="'+img_full_link+'"></a>');
						tb_init(obj.parent('a'));
					}
					
					//Shrink the image and add link to full-sized image
					obj.height(new_height).width(new_width);
					obj.addClass(classes);
					
					//zoom icon
					if (options.icon == true) {
						obj.after('<div class="thumb-zoom"> </div>');
						obj.hover(function(){
							$(this).next('.thumb-zoom').addClass("hover");
						},function(){
							$(this).next('.thumb-zoom').removeClass("hover");
						});
					}
				
				}
			});
		};
	})(jQuery);

Revision: 7964
at August 25, 2008 09:19 by grosbouff


Initial Code
/**
 * scaleImage 0.1
 * 
 * Rendez vos sites glissant !
 *
 * Copyright (c) 2008 Benoît G (http://www.tim-burton.net) based upon
 * Licensed under the Creative Commons License:
 * http://creativecommons.org/licenses/by/3.0/
 *
 * Date: 2008-08-25
 */
 
	(function($){
		$.fn.scaleImage = function(options) {

			var defaults = {
			maxwidth: 200,
			linkclass:'',
			icon:true,
			thickbox:true
			};
			var options = $.extend(defaults, options);

			return this.each(function() {
				obj = $(this);

				var width = obj.width();
				var height = obj.height();
				if (width > options.maxwidth) {
					//Set variables	for manipulation
					var ratio = (height / width );
					var new_width = options.maxwidth;
					var new_height = (new_width * ratio);
					var classes = options.linkclass+' scaleImage';

					//thickbox
					if (options.thickbox == true) {
						var img_full_link = obj.attr('src');
						obj.wrap('<a class="thickbox" title="'+obj.attr('alt')+'" href="'+img_full_link+'"></a>');
						tb_init(obj.parent('a'));
					}
					
					//Shrink the image and add link to full-sized image
					obj.height(new_height).width(new_width);
					obj.addClass(classes);
					
					//zoom icon
					if (options.icon == true) {
						obj.after('<div class="thumb-zoom"> </div>');
						obj.hover(function(){
							$(this).next('.thumb-zoom').addClass("hover");
						},function(){
							$(this).next('.thumb-zoom').removeClass("hover");
						});
					}
				
				}
			});
		};
	})(jQuery);

Initial URL


Initial Description


Initial Title
jQuery dynamic image resizer function

Initial Tags
resize, image, jquery

Initial Language
JavaScript