Question

我正在建立一个画廊并开始玩fancyBox 2.这很酷，我只有一个问题。我想将fancyBox分成两列，一列用于图像，另一列用于注释。我希望图片在左侧，评论在右侧。

我尝试过使用bootstrap行/列，但它似乎不起作用。这就是我试过的：

$(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模板部分，比如wrap。我试图在那里添加列，但我没有实现我想要的。

我也尝试使用像这样的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;

但这并没有正确调整框的大小 - 这是截图：

我整天都在玩这个游戏，到处搜索，但没有找到任何解决方案。

谢谢

Answer 1

我可能会避免使用bootstraps，除了可能是“img-responsive”标签。这将提供我相信你所追求的功能。

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

	<!DOCTYPE html>
<html>
<head>

	<title>Fancy Box</title>

</head>
<body>
<div class="fancyBox">
	<div class="images">
	</div><div class="comment"></div>
</div>
</body>
</html>

Fancybox 2如何在图片侧面添加自定义列

1 个答案: