我试图在块网格中使用Foundation 4的Clearing Lightbox，如下所示：
<div class="row">
<div class="large-3 columns">
...
</div>
<div class="large-9 columns">
<ul class="small-block-grid-2 large-block-grid-3 clearing-thumbs" data-clearing>
<li><a href="image1.jpg"><img src="image1_lg.jpg" /></a></li>
<li><a href="image2.jpg"><img src="image2_lg.jpg" /></a></li>
<li><a href="image3.jpg"><img src="image3_lg.jpg" /></a></li>
<li><a href="image4.jpg"><img src="image4_lg.jpg" /></a></li>
<li><a href="image5.jpg"><img src="image5_lg.jpg" /></a></li>
<li><a href="image6.jpg"><img src="image6_lg.jpg" /></a></li>
<li><a href="image7.JPG"><img src="image7_lg.jpg" /></a></li>
<li><a href="image8.JPG"><img src="image8_lg.jpg" /></a></li>
<li><a href="image9.JPG"><img src="image9_lg.jpg" /></a></li>
</ul>
</div>
</div>
我的笔记本电脑屏幕上的布局显示了3列网格中的图像，这就是我想要的（当窗口变得更窄以模拟移动时，显示2列网格）。当我点击图像时，它会加载清除灯箱，但“缩略图”图像仍然位于灯箱屏幕底部的块网格中。因此，只显示了三个完整的缩略图图像，您可以在其下方看到第二行缩略图。 （来自Google Chrome的屏幕截图here。）
如何修复缩略图，以便1）它们全部显示在一行中，或者2）只显示活动的图像，或者3）大图像下方是否显示缩略图？
我是基金会的新手，我感谢您提供的任何帮助！
答案 0 :(得分：2)
此问题已报告https://github.com/zurb/foundation/issues/2696。虽然声称在5.1中已经修复，但我仍然遇到了这个问题。
我使用了Michael Fillier的建议来解决这个问题：
/***** Fix Block Grid and Clearing Compatibility *****/
[class*="block-grid-"] li {
margin-right:0!important;
}
.clearing-blackout li {
clear:inherit!important;
}
第一行通过清除删除添加到li的边距。第二 line删除灯箱视图中的拇指清除。
答案 1 :(得分：1)
我与基金会支持部门通信，他们建议我将其添加到我的样式表中以完全隐藏缩略图：
.clearing-blackout ul {display:none !important;}
然后我回到默认的清除灯箱语法，如文档中所示：
<ul class="small-block-grid-2 large-block-grid-3" data-clearing>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
<li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
</ul>
现在，当我点击块网格中的一个小图像时，它会在清除灯箱中提取正确的大图像。虽然没有显示旋转木马，旋转木马的空间仍然降级，所以我添加了这个代码，使大图像填满了更多的屏幕：
@media only screen and (min-width: 48em) {
.clearing-assembled .clearing-container .visible-img {
height: 95%;
}
}
希望这对其他人有帮助。感谢马克在基金会的支持，以及另一张让我离开的海报。
答案 2 :(得分：1)
我遇到了类似的问题，我在Foundation的Github页面上找到了一个很好的CSS修复程序。
您应该将以下行添加到CSS中，并且所有缩略图都会按预期显示在一行中。
div.clearing-container .large-block-grid-3 > li:nth-of-type(3n+1) {
clear: none; }
答案 3 :(得分：0)
基金会不会单独使用presentationaly类开箱即可，但您可以通过隐藏清除库并添加一些javascript / jquery来创建相同的效果。
使用自定义类创建包含简单图像和锚标记的块网格，在本例中为img-spawn-gallery
然后创建清算库，但使用hide表示类，以便不显示。
<div class="row">
<div class="large-3 columns">
<p>Some other content here</p>
</div>
<div class="large-9 columns">
<ul class="small-block-grid-2 large-block-grid-3">
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
</ul>
<ul id="my-gallery" class="clearing-thumbs hide" data-clearing>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
<li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
</ul>
</div>
</div>
然后，在使用Zepto或jQuery的JavaScript中，您可以覆盖锚标记的行为，以便他们单击隐藏的清除库的第一个img。由于只隐藏了缩略图，因此其余部分都能正常工作。
$(document).ready(function() {
$(".img-spawn-gallery").click(function() {
$("#my-gallery li a :first").trigger('click');
});
});
更新10/16/13：这是一个编辑，但应该作为评论添加。我在这里添加它，因为它可能对那些面临这个问题的人有用。匿名海报，随意在评论中获得赞誉。
要添加跳转到您单击的图像的功能，请编辑 像这样的Javascript：
$(".img-spawn-gallery").click(function()
{
index = $(this).parents("li").index();
$("#my-gallery li a :eq("+index+")").trigger('click');
});
答案 4 :(得分：0)
在回答“3”时，大图像下方没有显示缩略图“
在Foundation 5中，我更改了以下默认值：
$clearing-active-img-height: 75%;
为：
$clearing-active-img-height: 100%;
大图像下方没有显示缩略图。