Question

FancyBox重叠问题：

我们公司会购买商业许可证，如果我们能够找到解决方案似乎是一个简单的问题。在我们当前的灯箱中，我们可以更改叠加层以显示不同的背景图像，以补充灯箱中显示的每个视频。由于叠加层是ID，因此可以使用标记中的onclick轻松完成：

function myfunction() {
    document.getElementById("lightbox-overlay").style.backgroundImage="url('image.jpg')";
}

但是，fancybox叠加层是用类定义的：

.fancybox-overlay { background: url('fancybox_overlay.png'); }

我们不是编码专家，但已经搜索了我们的密钥，寻找解决方案。我们喜欢fancybox，因为它具有内置的响应能力。

任何建议都将不胜感激。

Answer 1

完全可行。一种方法是使用数据属性w /您想要用作背景图像的正确图像。

在Fancybox触发器上：

<a class="fancybox-media" rel="fancybox-button" href="http://www.youtube.com/watch?v=opj24KnzrWo" title="Example" data-img="URL to your Image">

然后，使用来自fancybox API的其中一个回调，例如＆＃39; beforeLoad＆＃39;在开始加载内容之前被调用。＆＃39;

$(".fancybox-media").fancybox({
    beforeLoad: function() {
        var backgroundImg = $(this.element).attr('data-img');
        $('.fancybox-inner').css('background', 'url(' + backgroundImg + ')');
    }
});

它显然需要一些CSS样式工作，只需确保在Fancybox CSS之后包含相关的CSS，你应该能够很容易地集成它。

更改FancyBox叠加图像功能

1 个答案: