# My first jQuery plugin - blurStuff()

I've played with jQuery for some time now but have never written my own plugin.

A question was asked: "can I blur an image using jQuery?" and I thought this to be a decent candidate to play with.

Here's my code so far:

(function ($) {$.fn.blurStuff = function (options) {
var settings = $.extend(defaults, options);$(this).wrap('<div data-blurimage />');

var blurContainers = $(this).closest('[data-blurimage]'); blurContainers.each(function () { var img =$(this).children();

$(this).css({ 'width': img.width(), 'height': img.height(), 'overflow': 'hidden', 'position': 'relative' }); var clone = img.clone(); clone.css({ 'opacity': 0.2, 'position': 'absolute' });$(this).append(clone.clone().css({'left': +settings.blurRadius, 'top': +settings.blurRadius}));
$(this).append(clone.clone().css({'left': -settings.blurRadius, 'top': +settings.blurRadius}));$(this).append(clone.clone().css({'left': +settings.blurRadius, 'top': -settings.blurRadius}));
$(this).append(clone.clone().css({'left': -settings.blurRadius, 'top': -settings.blurRadius})); }); if (settings.deblurOnHover == true) { blurContainers.hover(function () {$(this).children('img:gt(0)').toggle();
});
}

return blurContainers;
};
})(jQuery);


In action: http://jsfiddle.net/gvee/xvvWj/

Example usage:

$('img').blurStuff({deblurOnHover: true, blurRadius: 2});  My working logic is to wrap the selector in a parent container and then append 4 translucent clones to this, where each clone is positioned slightly off centre. This works pretty well so far and I'm pleased with my progress but I can conceive a couple of potential bugs that I wanted some opinions on! 1. Is my approach reasonable? I realise that I'm appending an extra 4 elements to the DOM on each call which is not ideal (I could get away with using just two, laterally or diagonally, but I think 4 produces a better effect)... 2. What to do if a user passes a fixed position element? This will break existing flow. 3. Should I bother validating/sanity checking the parameter values? If so, how should I approach this? Previously I had a parameter called blurOpacity but I removed this because I realised that the wrong values (e.g. 1) effectively "breaks" things. ## 2 Answers In the code I only would modify the variable declarations: var defaults = {blurRadius:2, deblurOnHover:false}, settings =$.extend(defaults, options),
img, blurContainers, clone;


1. The efect work great. I think the approach is good, don't think that adding four elements would be a big cost.
2. You could check if the has the fixed property to avoid breaking anything.
3. By the parameters you have rigth now I shouldn't bother. If you decide to add the opacity again it would be a good idea to check it. If greater than 0.x use the default instead.
• hey, thanks, for sure I'm going to visit you on monday, at work :P – Gonz Feb 15 '14 at 2:22

overall it's pretty good! But I have a few minor points:

• The constant references to $(this) are bad. That call creates a jQuery collection each time. You could just save this as a variable. var$this = $(this);$this.append(...);
$this.append(...);  • You could combine your defaults and settings to save a reference; var settings =$.extend({

• I'd probably argue that he should be using chaining rather than just caching \$this – megawac Feb 18 '14 at 21:37
• @megawac Perhaps, but it doesn't help from a performance point of view. Calling append once with an array of elements would probably be better. – Jivings Feb 19 '14 at 16:03