Fancybox & carouFredSel: fancybox appears but is overlaid with grey background

Question

I've created webpage with a carouFredSel and a Fancybox . Everything works fine, but Fancybox appears as is image is covered by grey shade. html code for fancyboxes:

<a href="/images/front/1.jpg" class="lightbox_trigger" rel="fancybox1" >
<a href="/images/front/2.jpg" class="lightbox_trigger" rel="fancybox2" >

and a js:

$('#carousel  a.lightbox_trigger').fancybox({
    cyclic  : true,
    opacity: true,
    onStart : function() {
        $('#carousel').trigger("pause");
    },
    onClosed: function() {
        $('#carousel').trigger("play");
    }
});

Update 1

as of css:

.tooltip {
  font-weight: bold;
  font-size: 1.1em;
}

.tooltip h3 {
  color: red;
}

.tooltip h4 {
  color: green;
}

in /fancybox.css z-index is set to around 1100

Answer 1

I had to create on complete callback and there set element's opasity:

$(element).fancybox({
    cyclic  : true,
    opacity: true,
    overlayOpacity: 0.9,
    zoomSpeedIn: 1000,
    onStart : function() {
        $('#carousel').trigger("pause");
    },
    onClosed: function() {
        $('#carousel').trigger("play");
    },
    onComplete: function(){
        $('#fancybox-wrap').css('margin-top', '-50px')
        var fb = $("#fancybox-content")
        $(fb).css({'opacity': '1', 'height': '520px'})

    }
});