Multiple background colors using fanybox-2

Question

I'm using fancybox to display a couple of my links in a website - The designer wants opaque backgrounds for them, and I've successfully managed to change the colour of the background.

My question now is this: can I vary the colour between links?

For example - have the screen behind the box that is triggered by the 'shows' link be grey, while the other two links, 'music' and 'video' are a salmon pink colour.

Here's my script:

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

and my links:

<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>

Any suggestions? Is there a way to use an if/else loop in the script that I'm just not seeing?

Thanks in advance for your help!

Answer 1

You could pass the (rgba) color for each link using a (HTML5) data-* attribute like :

<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>

Then fetch the color within the beforeShow callback and pass it to the helpers using the $.extend() method like :

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

JSFIDDLE