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?

Answer 1

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>

Answer 2

You can target instance of the fancybox being clicked using $(this).fancybox('instance') on your event. It'll give you an object with many properties. one of them is element, on which you can call parentNode for example, or anything you need. Like this will give you the id of the parent of the a element calling the fancybox:

$('.fancybox').fancybox({
    'beforeLoad': function(){
          $(this).fancybox('instance')[0].element[0].parentNode.id

    }
});