Fancybox - add class to the title depending on div id

Question

I have css classes such as .blue, .red etc that define background colors. I want to add specific class to div containing class 'fancybox-title', depending on the id that belongs to the fancybox

<div class="fancybox-skin">
    <div class="fancybox-title fancybox-title-inside-wrap">Welcome</div>  //here I want to add class, for example '.blue'...
    <div class="fancybox-outer">
        <div class="fancybox-inner">
            <div style="display: block;" id="login-register-fancybox"></div>  //depending on the ID from this line of code
        </div>
    </div>
</div>

I've had several attempts inside of:

$('.fancybox').fancybox({
    'beforeLoad': function(){

    }
});

including trying to find elements by ID, switches etc, but scripts started to look to big and to messy while not giving me desired result. I believe there is much simpler way to accomplish that, just can't figure it out. Can anyone help?

Yeah, sorry, accidentaly deleted the dot when pasting and cleaning the code for SO — Pejs
Could you give some information about what you mean by "depending on the id that belongs to the fancybox"? — BillyNate
I have several 'boxes' (divs with various id's that contain different html elements, for example <div id="register">, <div id="login">), but fancybox automaticaly locates them inside of <div class="fancybox-inner"> structure, while .fancybox-title is placed higher in the structure, as per example in my question. So I need to dig out that ID in order to define which class should be added to the title... and how to get that done is still a mystery — Pejs
I understand you currently got something like this: jsfiddle.net/0x57y6q6 Am I correct? — BillyNate
Exactly, now I need to add specific class (for example .blue) to helper 'fancybox-title' if that div's ID is 'register' — Pejs

BillyNate BillyNate · Accepted Answer · 2015-06-16T18:24:14

I'm going to provide you with two solutions:

First: The answer to your question "depending on the id that belongs to the fancybox" uses a switch statement and has the classes hardcoded. this contains an attribute content: the loaded content. By wrapping the content in a jQuery object we can get the id of the content.

Second: To make your code more generic I added a new attribute to your HTML data-title-class, this value of this attribute is set added to the classes of the fancybox title.

Both solutions use the callback afterShow because on earlier callbacks the fancybox-title is not added yet.

$('.fancybox').fancybox({ afterShow: function()
{
    // First solution, based on id of content.
    var titleClass;
    switch($(this.content).attr('id'))
    {
        case 'register':
            titleClass = 'blue';
            break;
        case 'login':
            titleClass = 'red';
            break;
    }
    $('.fancybox-title span').addClass(titleClass);
    
    //Second solution, based on data attribute.    
    if($(this.content).attr('data-title-class'))
    {
        $('.fancybox-title span').addClass($(this.content).attr('data-title-class'));
    }
} });

#register, #login { display: none; }
.blue { background-color: #00f !important; }
.red { background-color: #f00 !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

<div id="register">
    registering...
</div>
<div id="login" data-title-class="red"><!-- Second solution -->
    logging in...
</div>

<a href="#register" title="register now!" class="fancybox">register</a><br />
<a href="#login" title="login now!" class="fancybox">login</a>

Fancybox - add class to the title depending on div id

2 Answers