Utilizing fanybox-2 for creating a variety of background colors

I am currently using fancybox to showcase some of my website links with opaque backgrounds as requested by the designer. I have successfully customized the background color to meet the requirements.

However, I am now facing a new question: is it possible to have different background colors for different links?

For instance, can I set the background behind the box triggered by the 'shows' link to be grey, while the 'music' and 'video' links have a salmon pink background?

Below is the script I am using:

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

And here are the links I am working with:

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

Do you have any suggestions? Is it possible to implement an if/else loop in the script to achieve this customization?

Thank you in advance for your assistance!

jqueryhtmlcssfancyboxfancybox-2

Answer №1

To apply a unique color to each link, you can include the RGBA color values in a custom HTML5 data attribute like this:

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

In the beforeShow callback, retrieve the color and assign it to the overlay using $.extend() method:

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

Check out the JSFIDDLE example.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch between light and dark mode on a webpage using HTML

I am looking to create a script using JavaScript, HTML, and CSS that can toggle between dark mode and night mode. Unfortunately, I am unsure of how to proceed with this task. https://i.sstatic.net/xA3Gq.png https://i.sstatic.net/v5vq5.png My goal is to ...

javascripthtmlcssbootstrap-4ejs

What is the best way to incorporate white-space:normal within the text of a jQuery Mobile grid button?

Below is the code for my jQuery Mobile Grid buttons: <div class="ui-grid-b my-breakpoint"> <div class="ui-block-a"><button type="button" data-theme="c"> <img src="res/icon/android/business.png" height="45"><br>Business</ ...

javascriptjquerycssjquery-uijquery-mobile

Adding a Close Button to a MaterializeCSS Card or Card-Panel

Hey everyone! I'm looking for guidance on how to add a close button (x) to a card or card-panel in MaterializeCSS. While Bootstrap offers an Alert component, unfortunately MaterializeCSS does not have one readily available. Does anyone know of a wor ...

htmltwitter-bootstrap-3materialize

What is the process for linking HTML files to a Node.js/Express server backend?

As I delve into my school project, I have encountered a hurdle that has left me searching for a suitable solution. The project involves creating multiple HTML pages, styling them with CSS, adding functionality using JavaScript, and ultimately integrating b ...

htmlnode.jsmongodbexpress

Which specific CSS attributes should be applied to create a scroll bar within this table?

Below is the table that I am working with: 'table' I want to ensure that its width remains the same even when the screen size is reduced, and only add a scroll bar to view it. I have already included overflow: scroll; in the container <div> ...

htmlcsshtml-tablescroll

CSS navigation bar (background gradient problem)

I have encountered an issue with my multi-tier navigation menu where tiers below tier 1 are displaying an unexpected block to the left of the options. I suspect this problem is related to the background gradient applied, but I haven't been able to fin ...

htmlcss

Why doesn't jQuery ajax work when sourcing the URL from a variable but works with a hard-coded URL?

During my experimentation with setting and getting the URL for a jQuery Ajax (post) call, I realized the value of dynamically setting the destination URL for the request. Here's how I attempted to achieve this: To set the URL to 'store.php' ...

javascriptphpjqueryajax

The WebDriver encountered an error while trying to click on an element

When using Selenium WebDriver, I am facing an issue with selecting an item from a drop-down list. The element I want to click on is labeled as "game club". Despite attempting to select different elements, I keep encountering an error stating that none of ...

javascripthtmlseleniumjquery-selectorshtml.dropdownlistfor

Struggling to properly align a div on top of an image

view image description herei need assistance with centering the div over the background image. I attempted to use relative positioning for the container and absolute positioning for the elements, but it did not yield the desired result. The code snippet be ...

htmlcss

how to make a div scroll after reaching a specific pixel distance

Hi there! I'm working with a DIV that has a width of 1600px. I'm wondering if there's a way to implement a feature within the DIV that fixes the first 200px and adds an automatic scroll for the rest of the content. Do you know of any CSS tr ...

jqueryhtmlcss

Ensure that this regular expression is able to accurately match all numbers, even those without decimal points

Seeking help to create a script that can extract the negative percentage value between two numbers. One of the numbers is dynamic and includes different currencies, decimals, etc., so I believe a regex is needed for this task. The current script works, but ...

javascriptjquery

Displaying an animated loading gif as the form is submitted

How can I get my form to submit and display an alert upon submission when using the following JS on a button with class "submit"? $( ".submit" ).click(function( event ) { if(some checks){ ... }else{ ...

javascriptjqueryjquery-events

What is the best way to align this content in a specific area?

How can I center the content in each section of my webpage? Here is an image for reference: https://i.stack.imgur.com/PHEXb.png I want Section 1 and Section 2 to be 100vh with the content centered on the page. .content { height: 100vh; } <!do ...

htmlcsstwitter-bootstrapbootstrap-5

The input box within the form is insufficiently sized

My task is to generate textareas with custom parameters like "cols" and "rows" and display them in forms. However, these parameters seem not to be functioning as expected. Whether I set cols=1000 or cols=1, there is no difference in the output. After revie ...

htmlformstextarea

Control input for filtering and searching using Bootstrap

My goal is to create a search and filter user input field. I found an example on an old bootstrap page that showcases exactly what I need, but I'm facing some issues with displaying the results. Here's the Bootstrap example page. The search bar ...

cssbootstrap-4

Vue: update data and trigger function upon completion of animation transformation, utilizing animation transformation completion listener

Check out this straightforward Vue example: https://codesandbox.io/s/sleepy-haze-cstnc2?file=/src/App.vue https://i.stack.imgur.com/zboCb.png Whenever I click on the square, it not only changes color but also expands to 200% of its original size with a 3 ...

javascripthtmlcssvue.jsvuejs3

What is the best way to duplicate a CSS shape across a horizontal axis?

I am working on decorating the bottom of my page with a repeated triangle design. The image provided only displays one triangle, but I would like to extend it across the entire horizontal div. Here is a screenshot of my progress so far: https://i.stack.im ...

htmlcssrepeatcss-shapes

Angular Material Toolbar Experiencing Color Distortion

To see the issue in action, check out this CodePen: An ongoing problem I've encountered with Angular Material involves distorted colors on the toolbar. The edges of the toolbar display one shade of green, while the middle shows a different shade. Tak ...

javascripthtmlangularjsangular-material

Guide on injecting javascript code containing php variables into a php page

I have successfully developed a PHP page and Javascript code that includes some PHP variables. The code is designed to insert PHP variables into the database using Javascript: <?php $id = "Kevin"; $user = "Calvin"; ?> <!-- include jquer ...

phpjavascriptjqueryajax

Issue: Adjustment of elements' size using an "onclick" method when reaching specific screen width

Seeking assistance with implementing media queries in JavaScript. Can an object be resized from JavaScript code based on a specific screen width, rather than the default one? For example, if I have a button that opens a div with a height of 600px when cli ...

javascripthtmlmpmediaquery