Javascript ZURB基金会4在方格网中清除灯箱缩略图_Javascript_Zurb Foundation

Javascript ZURB基金会4在方格网中清除灯箱缩略图

javascript zurb-foundation

Javascript ZURB基金会4在方格网中清除灯箱缩略图,javascript,zurb-foundation,Javascript,Zurb Foundation,我试图在一个块网格中使用基础4的清除灯箱，如： <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>

我试图在一个块网格中使用基础4的清除灯箱，如：

<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个没有缩略图显示在大图像下方

我对基金会很陌生，我很感激你能提供任何帮助。p> Foundation不能单独使用Presentational类来实现这一点，但是您可以通过隐藏clearing gallery并添加一些javascript/jquery来创建相同的效果

使用简单图像和带有自定义类的锚定标记创建块栅格，在本例中为img spawn gallery

然后创建清除库，但使用“隐藏表示”类以使其不显示

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

更新10/16/13：这是一个编辑，但可能应该作为评论添加。我在这里加上它，因为它可能对那些面临这一问题的人有用。匿名海报，请在评论中随意使用

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

基金会不会仅仅通过presentationaly类就做到这一点，但您可以通过隐藏ClearingGallery并添加一些javascript/jquery来创建相同的效果

使用简单图像和带有自定义类的锚定标记创建块栅格，在本例中为img spawn gallery

然后创建清除库，但使用“隐藏表示”类以使其不显示

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

更新10/16/13：这是一个编辑，但可能应该作为评论添加。我在这里加上它，因为它可能对那些面临这一问题的人有用。匿名海报，请在评论中随意使用

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

我与基金会支持对应，他们建议我把这个添加到我的样式表中来隐藏缩略图：

.clearing blackout ul{显示：无！重要；}

然后我返回到默认的清除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>

希望这对其他人有帮助。感谢基金会的马克和其他让我走到这一步的海报。

< P>我与基金会支持对应，他们建议我把这个添加到我的样式表来隐藏缩略图：

.clearing blackout ul{显示：无！重要；}

然后我返回到默认的清除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>

希望这对其他人有帮助。感谢基金会的马克和其他让我走到这一步的海报。

< P>我遇到了类似的问题，我发现了一个很好的CSS补丁，用于基金会的GITHUB页面。

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

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

下面是详细的解决方案：

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

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

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

下面是详细的解决方案：

在回答3个问题时，大图下方没有显示缩略图

在基础5中，我更改了以下缺省值：

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

致：

大图下方未显示缩略图。

作为对3的回答，大图下方未显示缩略图

在基础5中，我更改了以下缺省值：

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

致：

大图下方未显示缩略图。

报告了此问题。虽然我声称在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的保证金。第二行删除lightbox视图中拇指的清除

报告了这一问题。虽然我声称在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的保证金。第二行删除lightbox视图中拇指的清除

谢谢你的回复！a.img-spawn-gallery链接如何知道在lightbox中启动哪个图像？好像是我的画廊李a：first每次都会挑第一个？我会试一试，也许到时候对我有意义这是伟大的工作，但正如我所怀疑的，总是打开灯箱的第一个图像

E有没有办法告诉它打开单击的图像？我通过ExpressionEngine动态生成代码，因此可能会有不同数量的图像。谢谢@AmyWitty我更新了这篇文章，作为一篇文章的更新，我回答了一位匿名用户的上一个问题。希望这有助于回答您的问题。感谢您的回复！a.img-spawn-gallery链接如何知道在lightbox中启动哪个图像？好像是我的画廊李a：first每次都会挑第一个？我会试一试，也许到时候对我有意义这是伟大的工作，但正如我所怀疑的，总是打开灯箱的第一个图像。有没有办法告诉它打开单击的图像？我通过ExpressionEngine动态生成代码，因此可能会有不同数量的图像。谢谢@AmyWitty我更新了这篇文章，作为一篇文章的更新，我回答了一位匿名用户的上一个问题。希望这有助于回答你的问题。你刚刚救了我一个晚上！你刚刚救了我一个晚上！