fancybox-overlay顯示兩個元素

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; 
} 

...然後定義瓦爾`descripcion`和`comentarios`時使用beforeShow回調

$(".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