jquery - 使用 fanybox-2 的多种背景颜色

Question

我正在使用 fancybox 在网站上显示我的几个链接 - 设计师想要它们的背景不透明，我已经成功地改变了背景的颜色。

我现在的问题是:我可以改变链接之间的颜色吗？

例如 - 让“节目”链接触发的框后面的屏幕为灰色，而其他两个链接“音乐”和“视频”为橙红色。

这是我的脚本:

$(".fancybox").fancybox({
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(246, 150, 121, 1)'
            }
        }
    }
});

和我的链接:

<li><a href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/7725554&amp;color=a8a8a8&amp;auto_play=false&amp;hide_related=false&amp;show_artwork=true" class="fancybox fancybox.iframe"><u>Music</u></a></li>            
    <li><a href="shows.html" class="fancybox fancybox.iframe"><u>Shows</u></a></li>
    <li><a href="http://player.vimeo.com/video/65943302" class="fancybox fancybox.iframe"><u>Golden Hour</u></a></li>

有什么建议吗？有没有办法在我没有看到的脚本中使用 if/else 循环？

预先感谢您的帮助!

Answer 1

您可以使用 (HTML5) data-* 属性为每个链接传递 (rgba) 颜色，例如:

<a data-color="246, 150, 121, 1" class="fancybox fancybox.iframe" href="{link}">show</a>

<a data-color="209, 209, 209, 1" class="fancybox fancybox.iframe" href="{link}">golden hour</a>

然后在 beforeShow 回调中获取颜色并使用 $.extend() 将其传递给 helpers 方法如:

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        beforeShow: function () {
            var _color = "rgba(" + $(this.element).data("color") + ")";
            $.extend(this, {
                helpers: { overlay: { css: { background: _color } } }
            });
        }
    });
}); // ready

JSFIDDLE