5
\$\begingroup\$

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 defaults = {blurRadius:2, deblurOnHover:false};
        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.
\$\endgroup\$
5
\$\begingroup\$

In the code I only would modify the variable declarations:

var defaults = {blurRadius:2, deblurOnHover:false},
settings = $.extend(defaults, options),
img, blurContainers, clone;

Personal preference, but you can read a discusion about it here.

Answering your questions:

  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.
\$\endgroup\$
  • 1
    \$\begingroup\$ hey, thanks, for sure I'm going to visit you on monday, at work :P \$\endgroup\$ – gonzalon Feb 15 '14 at 2:22
2
\$\begingroup\$

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({
      blurRadius: 2, 
      deblurOnHover: false
    }, options);
    
\$\endgroup\$
  • \$\begingroup\$ I'd probably argue that he should be using chaining rather than just caching $this \$\endgroup\$ – megawac Feb 18 '14 at 21:37
  • \$\begingroup\$ @megawac I am comfortable with the concept on caching but not on chaining, can you elaborate please? \$\endgroup\$ – gvee Feb 19 '14 at 10:22
  • \$\begingroup\$ @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. \$\endgroup\$ – Jivings Feb 19 '14 at 16:03
  • \$\begingroup\$ masonry.desandro.com/methods.html \$\endgroup\$ – megawac Feb 19 '14 at 16:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.