Fancybox 和 LostGrid 让我很难受答案

【问题标题】：Fancybox and LostGrid are giving me a hard timeFancybox 和 LostGrid 让我很难受
【发布时间】：2020-04-05 21:26:39
【问题描述】：

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

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

现在的问题是，LostGrid 似乎仍然记得我拥有所有这些 <a> 标签，即使我将它们设为 display: none，并且布局变得疯狂。

我一直在想，但我真的不知道有什么解决方案。

谁能帮帮我？谢谢！

What I'd like (right solution)

What I've got

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

.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

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

【问题讨论】：

您应该向我们提供您正在工作的代码，以便更容易地了解您的问题
嗨，Sorix，我添加了我的代码。谢谢。

标签： html css fancybox gallery

【解决方案1】：

可以有多种解决方案，最简单的一种可能是将附加链接移到主区域之外，您可以将它们放置在任何地方，因为它们无论如何都是隐藏的。

【讨论】：

<div class="gallery">以外的其他地方？
我实际上在想“我怎么能把它放在我的 foreach 外面？但我实际上可以，最终，复制我的 foreach，然后把它全部隐藏起来。
转念一想你知道吗？我真的不认为这会起作用（无论如何我都会尝试），因为我没有正确的图片顺序。 ://
顺序相同。顺便说一句，你真的需要那个 LostGrid 吗（我不知道它是什么），也许你可以使用普通的 flexbox，例如css-tricks.com/adaptive-photo-layout-with-flexbox - 但你可以谷歌搜索更多示例。

【解决方案2】：

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

我必须将所有内容都放在一个新的容器 div 中，以便将大小直接提供给 .gallery 而不是其中的 a 标签。

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

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

非常感谢您的宝贵时间！！萨拉

【讨论】：