Question

我用carouFredSel和Fancybox创建了网页。一切正常，但Fancybox显示为图像被灰色阴影覆盖。 fancyboxes的HTML代码：

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

和js：

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

更新1

截至css：

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

.tooltip h3 {
  color: red;
}

.tooltip h4 {
  color: green;
}

/fancybox.css中的

z-index设置为1100

左右

Answer 1

我必须在完全回调时创建并设置元素的不透明度：

$(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'})

    }
});

Fancybox＆amp; carouFredSel：fancybox出现但覆盖着灰色背景

1 个答案: