Add CSS blur to fancyBox2 background

Question

How can you add a css-blur on the whole page, below a clicked image in Fancybox2? I mean a blur on the dark transparent background, not on the clicked image itself.

See example on http://jsfiddle.net/jRsjK/6867/ where I tried the (wrong) line

body '-webkit-filter' : 'blur(15px)'

Answer 1

I am guessing you mean something like this. JSFIDDLE.

jQuery

$(".fancybox").fancybox({
    beforeShow: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").addClass("blur");
    },
    afterClose: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").removeClass("blur");
    }
});

CSS

.blur {
    -webkit-filter: blur(5px)
}

As Martin Kovachev points out in the comments, this may be very resource-intensive on the CPU, and cause some delay and/or strange performance issues. Therefore, it can be useful to add hardware acceleration. Most often a 3D emulation technique is used where a 3D layer is added but not actually used, e.g. by setting translateZ(0) or translate3D(0,0,0).

Answer 2

See this fiddle

Just add the class blur to all elements outside the overlay and add a blur filter in CSS then you need an addtional SVG blur for Firefox.

jQuery

$(".fancybox").fancybox({
    beforeShow: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").addClass("blur");
    },
    afterClose: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").removeClass("blur");
    }
});

CSS

.blur {
    -webkit-filter: blur(5px);
    filter:url(#blur-effect-2);
}

HTML (This is needed for Firefox)

<svg id="svg-image-blur">

    <filter id="blur-effect-2">
        <feGaussianBlur stdDeviation="5" />
    </filter>
</svg>

Answer 3

you can add some wrapper to add the filter like this

<div id="wrapper">
    <a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

    <a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
</div>    

js and then set the filter on afterload and remove it on afterclose

$(".fancybox").fancybox({
    afterLoad:function(){
        $("#wrapper").css('-webkit-filter','blur(15px)');
    },
    afterClose:function(){
        $("#wrapper").css('-webkit-filter','');
    }
});    

http://jsfiddle.net/jRsjK/6870/

Answer 4

I was having the same issue, the blur is already in the fancybox function but if you are not seeing the blur then it is possibly because you don't have fancybox_overlay.png in your CSS folder.

This is a common mistake because after downloading the zip folder we only extract the CSS and JS and forget about the additional images that are in the zip folder. Goto inspect element and you can see it will show fancybox_overlay.png missing.

Answer 5

DEMO

Its already there in the fancybox

$(".fancybox").fancybox();