├── README.md ├── index.html └── jquery.gaussian-blur.js /README.md: -------------------------------------------------------------------------------- 1 | [![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/) 2 | 3 | This is the plugin which adds Gaussian Blur effect for images. This plugin uses the SVG and filter property for Internet Explorer 8-. Plugin doesn't work in Safari because it doesn't support feGaussianBlur element. You can use canvas element to support it but here is no canvas. 4 | 5 | Here is one remark: each image should be in some container (e.g. span) 6 | 7 | Using 8 | $('.blurImageContainer').gaussianBlur({ 9 | deviation: 3, //level of blur 10 | }); 11 | 12 | You should to add that styles: 13 | .blurImageContainer {display: inline-block; position: relative; overflow:hidden;} 14 | .blurImageContainer > .blurImage {position: absolute; top:0; left:0; z-index:1;} 15 | .blurImageContainer > [id^="blurred"] {position: absolute; top:0; left:0; z-index:0;} 16 | 17 | Live Example 18 | http://finom.ho.ua/blur/ 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 22 | 34 | 35 | 36 | 37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 |
75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /jquery.gaussian-blur.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 3 | var ua = navigator.userAgent; 4 | var isLtIE8 = ~ua.indexOf('MSIE 6') || ~ua.indexOf('MSIE 7') || ~ua.indexOf('MSIE 8'); //is it old IE 5 | 6 | //mitcro lib that creates SVG elements and adds attributes for it 7 | var SVG = { 8 | 9 | //namespaces 10 | svgns: 'http://www.w3.org/2000/svg', 11 | xlink: 'http://www.w3.org/1999/xlink', 12 | 13 | //creating of SVG element 14 | createElement: function(name, attrs){ 15 | var element = document.createElementNS(SVG.svgns, name); 16 | 17 | if(attrs) { 18 | SVG.setAttr(element, attrs); 19 | } 20 | return element; 21 | }, 22 | 23 | //setting attributes 24 | setAttr: function(element, attrs) { 25 | for(var i in attrs) { 26 | if(i === 'href') { //path of an image should be stored at xlink:href attribute 27 | element.setAttributeNS(SVG.xlink, i, attrs[i]); 28 | } else { //common attribute 29 | element.setAttribute(i, attrs[i]); 30 | } 31 | } 32 | return element; 33 | } 34 | } 35 | 36 | jQuery.fn.gaussianBlur = function(args){ 37 | 38 | var args = $.extend({ 39 | deviation: 1, //intensity of blur 40 | imageClass: 'blurImage' //the class of original image 41 | }, args); 42 | 43 | $(this).each(function(){ 44 | var $this = $(this); 45 | 46 | var $img = $this.children('img.'+args.imageClass); //image that should be blurred 47 | if(!$img.length) return; 48 | 49 | var blurredId = Math.random(); //unique id for blurred image 50 | var imgSrc = $img.attr('src'); //original image's path 51 | var imgWidth = $img.width(); //width 52 | var imgHeight = $img.height(); //height (your CO :)) 53 | var svg, filterId, filter, gaussianBlur, image; //description below 54 | 55 | $this.children('[id^="blurred"]').remove(); //removing the blurred image during second using of plagin 56 | //problem is that we can't add any class to SVG element 57 | $this.width(imgWidth).height(imgHeight); 58 | 59 | if(!isLtIE8) { //if it modern browser 60 | 61 | svg = SVG.createElement('svg', { //our SVG element 62 | xmlns: SVG.svgns, 63 | version: '1.1', 64 | width: imgWidth, 65 | height: imgHeight, 66 | id: 'blurred'+blurredId 67 | }); 68 | 69 | filterId = 'blur'+blurredId; //id of the filter that is called by image element 70 | filter = SVG.createElement('filter', { //filter 71 | id:filterId 72 | }); 73 | 74 | gaussianBlur = SVG.createElement('feGaussianBlur', { //gaussian blur element 75 | 'in':'SourceGraphic', //"in" is keyword. Opera generates an error if we don't put quotes 76 | stdDeviation: args.deviation //intencity of blur 77 | }); 78 | 79 | image = SVG.createElement('image', { //The image that uses the filter of blur 80 | x: 0, 81 | y: 0, 82 | width: imgWidth, 83 | height: imgHeight, 84 | href: imgSrc, 85 | style: 'filter:url(#'+filterId+')' //filter link 86 | }); 87 | 88 | filter.appendChild(gaussianBlur); //adding the element of blur into the element of filter 89 | svg.appendChild(filter); //adding the filter into the SVG 90 | svg.appendChild(image); //adding an element of an image into the SVG 91 | this.appendChild(svg); //adding an SVG element into span which contains the original image 92 | 93 | } else { //if it's IE6,7,8 94 | $img.clone().css({ //cloning of the original image and adding some attributes 95 | //filter property; here the intensity of blur multipied by two is around equal to the intensity in common browsers. 96 | filter: 'progid:DXImageTransform.Microsoft.Blur(pixelradius=' + args.deviation*2 + ')', 97 | //aligning of the blurred image by vertical and horizontal 98 | top: -args.deviation*2, 99 | left: -args.deviation*2, 100 | //somehow the heights and the widths of the image are unequal; fixing 101 | width: imgWidth, 102 | height: imgHeight 103 | }).removeClass(args.imageClass).attr('id', 'blurred'+blurredId).appendTo(this); 104 | } 105 | }); 106 | 107 | } 108 | 109 | })(); --------------------------------------------------------------------------------