2

我正在尝试在块网格中使用 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 列网格）。当我单击图像时，它会加载清除灯箱，但是“缩略图”图像仍位于灯箱屏幕底部的块网格中。所以只显示了三个完整的缩略图图像，您可以在它们下方看到部分第二行缩略图。（屏幕截图来自谷歌浏览器。）

如何修复缩略图图像，以便 1）它们都连续显示，或 2）仅显示活动的图像，或 3）大图像下方不显示缩略图？

我是 Foundation 的新手，感谢您提供的任何帮助！

4

5 回答 5

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 的边距。第二行删除了灯箱视图中拇指的清除。

于 2014-02-12T20:24:54.323 回答
1

我与 Foundation Support 通信，他们建议我将其添加到我的样式表中以完全隐藏缩略图：

.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>

现在，当我单击块网格中的一个小图像时，它会在 Clearing 灯箱中拉出正确的大图像。尽管没有显示轮播，但轮播的空间仍然被降级，所以我添加了这段代码以使大图像占据更多的屏幕：

@media only screen and (min-width: 48em) {
.clearing-assembled .clearing-container .visible-img {
    height: 95%;
    }
}

希望这对其他人有帮助。感谢 Foundation Support 的 Mark 和另一位让我成功的发帖人。

于 2013-08-29T16:36:20.527 回答
1

我遇到了类似的问题，我在 Foundation 的 Github 页面上找到了一个很好的 CSS 修复程序。

您应该将以下行添加到您的 CSS 中，所有缩略图将按预期显示在一行中。

div.clearing-container .large-block-grid-3 > li:nth-of-type(3n+1) {
clear: none; }

这是详细的解决方案：https ://github.com/zurb/foundation/issues/2825

于 2013-09-07T10:13:13.340 回答
0

Foundation 并没有单独使用presentationaly 类开箱即用地做到这一点，但是您可以通过隐藏clearing gallery 并添加一点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');
  });
});

2013 年 10 月 16 日更新：这是作为编辑完成的，但可能应该作为评论添加。我在这里添加它，因为它可能对那些面临这个问题的人有用。匿名海报，请随时在评论中获得荣誉。

要添加跳转到您单击的图像的功能，请像这样编辑 Javascript：

 $(".img-spawn-gallery").click(function() 
  {
    index = $(this).parents("li").index();
    $("#my-gallery li a :eq("+index+")").trigger('click');
  });
于 2013-07-25T23:02:21.770 回答
0

回答“3）大图像下方不显示缩略图”

在 Foundation 5 中，我更改了以下默认值：

$clearing-active-img-height: 75%;

到：

$clearing-active-img-height: 100%;

大图下方不显示缩略图。

于 2013-12-15T16:59:00.213 回答