Question

我需要帮助。我在一个显示照片的fancybox中或多或少地尝试过，并在facebook评论社交插件的图片旁边。

在fancybox选项Javascript中，我有一个

$(".fancybox").fancybox({
 padding: 0,
    modal: true,
        helpers: {
        thumbs : {
                    width  : 50,
                    height : 50
                },
        buttons: {},

        },

    afterShow: function(){
        var descripcion = "<div class='texto1'><p>TEXTO1</p></div>"
        var comentarios = "<div class='texto2'><p>TEXTO2</p></div>;"
        $('#fancybox-overlay').append(comentarios);
        $('#fancybox-overlay').append(descripcion);

    },
    nextEffect: 'fade',
    prevEffect: 'fade'
});

问题是它不会让我一次显示两个事物的叠加，只有一个或另一个......：S有任何解决方案，所以你可以显示两者？提前谢谢你

Answer 1

如果我清楚地了解你期望它做什么：

afterShow: function(){
    var descripcion = '<div class="texto1"><p>TEXTO1</p></div>';
    var comentarios = '<div class="texto2"><p>TEXTO2</p></div>';
    $('#fancybox-overlay').append(descripcion, comentarios);
}

Answer 2

注意语法错误......然后你可以创建一个包装器来在fancybox中插入你的新文本，让我们说

<div class='wrapText'></div>

...用一些风格来正确定位

.wrapText {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    color : #fff;
}

...然后使用beforeShow回调

将其添加到fancybox内容中

$(".fancybox").fancybox({
    beforeShow: function () {
      var descripcion = "<div class='texto1'><p>TEXTO1</p></div>";
      var comentarios = "<div class='texto2'><p>TEXTO2</p></div>";
      $("<div class='wrapText'>" +descripcion+comentarios+ "</div>")
        .prependTo( this.inner );
    }
});

SEE it working

fancybox-overlay显示两个元素

2 个答案: