Search code examples
jqueryfancyboxfancybox-2galleria

Using Fancybox2 to Display Dialog over Galleria

I am attempting to display a Fancybox 2 dialog over a full screen Galleria gallery. Here are the z-indexes I set:

.galleria-container notouch fullscreen {
    z-index: 10000;  /* default by component */
}

.fancybox-overlay {
    z-index:100001;
}
.fancybox-opened {
    z-index: 100030;
}
.fancybox-close {
    z-index: 100040;
}

I have played around with setting the width and height of the fancybox div to display but only get a display of about 20px and then it disappears. Is there a javascript API call that I missed? Thanks.

EDIT: here is the link - http://cdn1.doneupsalon.com/test.html.

Solution

  • This is what you are missing : . ... a dot (YES, a dot ... three, actually ;)

    You have this in your document :

    <style type="text/css">
    fancybox-overlay {
        z-index:100001;
    }
    fancybox-opened {
        z-index:100030;
    }
    fancybox-close {
        z-index:100040;
    }
</style>

    Your posted code is right but not your working code in your demo page.

    Actually, if you set the z-index to the .fancybox-overlay selector it would be good enough.