Zurb Foundation 4清除块网格中的Lightbox缩略图

Zurb Foundation 4 Clearing Lightbox Thumbnails in Block Grid

本文关键字：Lightbox 略图 网格 Foundation 清除 Zurb      更新时间：2023-09-26

我正试图在块网格中使用Foundation4的ClearingLightbox，如下所示：

<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列网格）。当我点击一个图像时，它确实加载了Clearing Lightbox，但是"缩略图"图像仍然在Lightbox屏幕底部的块网格中。因此，只显示了三个完整的缩略图，您可以看到它们下面的第二行缩略图。（这里的屏幕截图来自谷歌浏览器。）

我如何修复缩略图，使其1）它们都显示在一行中，或2）只显示活动的缩略图，或3）大图像下面没有显示缩略图？

我是基金会的新手，我很感激你能提供的任何帮助！

已报告此问题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;
}

第一行删除了通过清除添加到李的边距。第二该行删除了灯箱视图中的拇指清除。

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

.clearing-blackout ul {display:none !important;}

然后我回到默认的Clearing lightbox语法，如文档中所示：

<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%;
    }
}

希望这对其他人有帮助。感谢基金会支持部的马克和另一位让我成功的海报。

我也遇到过类似的问题，我在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

Foundation并不能单独使用表示类来实现这一点，但您可以通过隐藏清除库并添加一点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');
  });

回答"3）大图像下方未显示缩略图"

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

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

至：

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

大图像下方没有显示缩略图。

相关文章：