Fancybox 2写真の横にカスタムの列を追加する方法

ギャラリーを構築してfancyBox 2で再生を開始しました。これはかなりクールです。私はfancyBoxを2つのカラムに分割したい。一つはイメージ用、もう一つはコメント用である。私は写真を左側に、コメントは右側にしたい。Fancybox 2写真の横にカスタムの列を追加する方法

私はブートストラップの行/列を使用しようとしましたが、動作しないようです。これは私が試したものです：

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

私はまた、ラップなどの他のfancyBoxテンプレートセクションで遊んで試してみました。私はそこに列を追加しようとしましたが、私が望むものを達成できませんでした。

私もこのようにAJAXを使用してfancyBoxをロードしようとしている：

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

そして、これは、PHPファイルの内容です：

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

しかし、これは正しくボックスのサイズを変更しない - ここにありますスクリーンショット：私がされている

この一日中遊んでどこでも検索しましたが、解決策は見つかりませんでした。

おかげ

出典

2016-03-21 zachu

私はおそらく多分「IMG応答」タグを除いて、この1のブートストラップを避けるだろう。これは、私があなたが信じている機能を提供します。

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>

出典

2016-03-21 15:11:13 Rbla3066

私はfancyboxウィンドウに表示する画像やコメントのセクションを必要とするので、これはかなり私のために動作しません。 – zachu

Fancybox 2写真の横にカスタムの列を追加する方法

答えて

関連する問題