CODEWITHSUNDEEP
javascriptjquerycssfancybox-2
Espen S.
Espen S.

Reputation: 43

Different styles on two fancybox on same page

I have two different openers for fancybox on the same page. I want to have a black border on .fancybox2 and the regular white on .fancybox1. There are also some other minor differences. This is the script.

$(".fancybox").fancybox1({
            padding:10,
            helpers: {
            title: {
                type: 'inside'
            },
            overlay: {
                css : {
                    'background': 'rgba(0,0,0,0.6)'
                }
            }
        }
});

 //Fancy box number 2 not working with different style

$(".fancybox2").fancybox({
        padding:10,
        openEffect: 'elastic',
        closeEffect: 'elastic',
        helpers: {
            title: {
                type: 'inside'
            },
            overlay: {
                locked: false,
                css : {
                    'background': 'rgba(255,255,255, 0.6)'
                }
            }
        }
});

I have tried to use this style but that will affect both, they will both have black border.enter code here

<style type="text/css">.fancybox-skin {background-color: #000 !important;}</style>

Anyone got some suggestions how to solve this?

Upvotes: 1

Views: 418

Answers (1)

Raja Khoury
Raja Khoury

Reputation: 3195

Consider declaring your CSS using the Fancybox's Callbacks.
For example; Here I can make use of the beforeShow event to change .fancybox-skin to white for every element with class .fancybox1

$(".fancybox1").fancybox({
 beforeShow: function(){
  // here set the border color for each class
  $(".fancybox-skin").css("backgroundColor","white");

 },
   helpers : {
        overlay : {
           css : {
                   'background': 'rgba(0,0,0,0.6)'

                }
        }
    }
});

Here is a full demo as per your requirements

Upvotes: 1

Related Questions