Question

我需要在我的网站上放置一个画廊，该画廊仅显示每个类别的第一张图片。我还使用FlexGrid，因为我的布局有三列。

我有一个foreach循环，该循环为每个图像创建一个<a>标签，以便可以访问打开图库的所有图片。然后，我要做的是隐藏所有<a>的图像编号。 2、3、4等

现在的问题是，即使我将<a>设置为display: none，但LostGrid似乎仍然记得我拥有所有这些.gallery display block margin-top 50px a display block lost-column 1/3 3 30px position relative padding-bottom 17.25% margin-bottom 30px > div position absolute top 0 right 0 bottom 0 left 0 background-size cover background-position center &.hidden display none标签，并且布局变得很疯狂。

我一直在考虑，但是我真的不知道该怎么解决。

有人可以帮助我吗？谢谢！

What I'd like (right solution)

What I've got

这是我的代码（HTML / PHP [Kirby] + CSS [Stylus]）的基本部分：当然，如果您运行它就行不通。

<div class="gallery">
      <?php foreach($categories as $category): ?>
          <?php foreach($category->object()->toStructure() as $object): ?>
              <?php if($object->gallery()->isNotEmpty()): ?>
                  <?php $i = 0 ?>
                  <?php foreach($object->gallery()->toFiles() as $image): ?>
                      <a <?php e(!$i != 1, 'class="hidden"') ?> href="<?php echo $image->url() ?>" data-fancybox="gallery" data-caption="<?php echo $image->caption()->html() ?>">
                          <div class="image" style="background-image: url('<?php echo $image->url() ?>')"></div>
                      </a>
                      <?php $i++ ?>
                  <?php endforeach ?>
              <?php endif ?>
          <?php endforeach ?>
      <?php endforeach ?>
  </div>

ServerClass.start()

Answer 1

可以有多种解决方案，最简单的解决方案可能是将其他链接移到主要区域之外，您可以将它们放置在任何位置，因为它们始终被隐藏。

Answer 2

我明白了，显然，这比我想象的要容易。迟到总比不到好。

为了将大小直接提供给.gallery而不是其中的a标签，我必须将所有内容放入新的容器div中。

我发布了新代码，向您展示我的意思。

.referencesGallery
  display block
  margin-top 50px

  .gallery
    lost-column 1/3 3 30px
    position relative
    padding-bottom 17.25%
    margin-bottom 30px
    background-color lightpink
    a
      display block
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      background-color lightblue
      > div
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        background-size cover
        background-position center
      &.hidden
        display none

<div class="referencesGallery">

    <?php foreach($categories as $category): ?>
        <?php foreach($category->object()->toStructure() as $object): ?>
            <?php if($object->gallery()->isNotEmpty()): ?>
                <div class="gallery">
                    <?php $i = 0 ?>
                    <?php foreach($object->gallery()->toFiles() as $image): ?>
                        <a <?php e(!$i != 1, 'class="hidden"') ?> href="<?php echo $image->url() ?>" data-fancybox="gallery" data-caption="<?php echo $image->caption()->html() ?>">
                            <div class="image" style="background-image: url('<?php echo $image->url() ?>')"></div>
                        </a>
                        <?php $i++ ?>
                    <?php endforeach ?>
                </div>
            <?php endif ?>
        <?php endforeach ?>
    <?php endforeach ?>

</div>

非常感谢您的光临！！萨拉

Fancybox和LostGrid让我很难受

2 个答案: