0

如何在 Fancybox2 中单击的图像下方在整个页面上添加 css-blur？我的意思是深色透明背景上的模糊，而不是点击的图像本身。

请参阅http://jsfiddle.net/jRsjK/6867/ 上的示例，我尝试了（错误的）行

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

5 回答 5

3

我猜你的意思是这样的。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)
}

正如 Martin Kovachev 在评论中指出的那样，这在 CPU 上可能会占用大量资源，并导致一些延迟和/或奇怪的性能问题。因此，添加硬件加速可能很有用。大多数情况下，3D 仿真技术用于添加 3D 层但未实际使用的情况，例如通过设置translateZ(0)或translate3D(0,0,0)。

于 2013-10-03T15:52:53.750 回答
1

看到这个小提琴

只需将类模糊添加到覆盖层之外的所有元素并在 CSS 中添加模糊过滤器，然后您需要为 Firefox 添加额外的 SVG 模糊。

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（Firefox 需要这个）

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

    <filter id="blur-effect-2">
        <feGaussianBlur stdDeviation="5" />
    </filter>
</svg>
于 2014-02-26T18:07:07.317 回答
0

您可以添加一些包装器来像这样添加过滤器 

<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，然后在afterload上设置过滤器并在afterclose上将其删除 

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

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

于 2013-10-03T15:57:34.560 回答
-1

我遇到了同样的问题，模糊已经在 fancybox 函数中，但如果你没有看到模糊，那可能是因为你fancybox_overlay.png的 CSS 文件夹中没有。

这是一个常见的错误，因为在下载 zip 文件夹后，我们只提取 CSS 和 JS，而忘记了 zip 文件夹中的其他图像。转到检查元素，您可以看到它会显示fancybox_overlay.png缺失。

于 2015-11-18T22:43:06.083 回答
-2

演示

它已经在fancybox中了

$(".fancybox").fancybox();
于 2013-10-03T15:34:23.290 回答