Fancybox 2 Wie füge ich benutzerdefinierte Spalte an der Seite des Bildes

Ich baue eine Galerie und begann mit fancyBox 2 zu spielen. Es ist ziemlich cool, ich habe nur ein Problem. Ich möchte fancyBox in zwei Spalten aufteilen, eine für Bild und eine für Kommentare. Ich möchte, dass das Bild auf der linken Seite und die Kommentare auf der rechten Seite angezeigt werden.Fancybox 2 Wie füge ich benutzerdefinierte Spalte an der Seite des Bildes

Ich habe versucht, Bootstrap Zeilen/Spalten zu verwenden, aber es scheint nicht zu funktionieren. Das ist, was ich versucht:

$(document).ready(function() { 
    $(".fancybox").fancybox({ 
    tpl: { 
     image : '<div class="container-fluid"><div class="row"><div class="col-lg-9"><img class="fancybox-image" src="{href}" alt="" /></div><div class="col-lg-3">Comments will go here</div></div></div>', 
    } 
    }); 
});

Ich habe versucht, auch mit anderen fancybox Schablonenabschnitten wie Wrap spielen. Ich habe versucht, Spalten hinzuzufügen, aber ich habe nicht erreicht, was ich wollte.

ich auch die fancybox mit Ajax wie dieser Laden versucht:

href : "test.php", 
type : 'ajax', 
ajax: { 
    type: "POST", 
    data: { 
     temp: "tada" 
    } 
},

und dies ist ein Gehalt von PHP-Datei:

$template = ""; 
$template .= '<div class="container">'; 
$template .= '<div class="row">'; 
$template .= '<div class="col-lg-9">'; 
$template .= '<img class="fancybox-image img-responsive" src="http://image.com/theimage.jpg">'; 
$template .= '</div>'; 
$template .= '<div class="col-lg-3">'; 
$template .= 'Comments go here'; 
$template .= '</div>'; 
$template .= '</div>'; 
$template .= '<div>'; 
echo $template;

Aber diese das Feld nicht richtig die Größe - hier ist der Screenshot:

ich gewesen sein Den ganzen Tag damit spielen und überall suchen, aber keine Lösung gefunden.

Dank

Quelle

2016-03-21 zachu

ich wahrscheinlich Schopf aus dem Sumpf auf diese vermeiden würde, außer vielleicht den "img-responsive" Tag. Dies wird die Funktionalität geben, von der ich glaube, dass Sie danach sind.

html, body{ 
 
\t \t width: 100%; 
 
\t \t height: 100%; 
 
\t } 
 
\t .fancyBox{ 
 
\t \t position: inherit; 
 
\t \t margin: auto; 
 
\t \t width: 50%; 
 
\t \t height: 50%; 
 
\t } 
 
\t .images{ 
 
\t \t float: left; 
 
\t \t height: 100%; 
 
\t \t width: 70%; 
 
\t \t background-color: green; 
 
\t } 
 
\t .comment{ 
 
\t \t float: right; 
 
\t \t height: 100%; 
 
\t \t width: 30%; 
 
\t \t background-color: red; 
 
\t }

\t <!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
\t <title>Fancy Box</title> 
 

 
</head> 
 
<body> 
 
<div class="fancyBox"> 
 
\t <div class="images"> 
 
\t </div><div class="comment"></div> 
 
</div> 
 
</body> 
 
</html>

Quelle

2016-03-21 15:11:13 Rbla3066

Dies funktioniert nicht ganz für mich, als ich das Bild und Kommentare muß im fancybox Fenster anzuzeigen – zachu

Fancybox 2 Wie füge ich benutzerdefinierte Spalte an der Seite des Bildes

Antwort

Verwandte Themen