0

对于我自己无法解决的问题，我将不胜感激。我在 Webflow 中构建我的所有网站，然后经常使用 ACF Pro 将它们转换为 wordpress 主题，以使其动态和灵活。

在 Webflow 中，我想构建自己的 Lightbox Gallery，然后使用 html 和 css 元素将它们与 ACF Repeater 字段连接起来，以便您可以根据需要将尽可能多的图像添加到画廊/灯箱中。

我知道如何构建缩略图并向它们添加 Webflow 交互以便打开一个模块，并且我知道如何转换代码以便它与 ACF 转发器字段一起使用。我正在努力解决的是打开灯箱/模块后模块之间的导航。当然，当我将 Webflow 中的交互添加到“下一个”和“上一个”按钮时，它们可以正常工作（关闭当前模块，打开下一个或上一个模块），但是通过这种方法，我基本上为每个下一个和上一个按钮添加了交互每个模块单独，始终针对特定的下一个或上一个模块。因此，这种方法显然不是动态的，并且在我添加 ACF 转发器字段后不再起作用，因为下一个/上一个按钮针对特定元素/div。

这是我的一个灯箱项目的 html（我使用带有背景图像的 div 用于缩略图和模块图像，以及带有文本的 div 用于上一个和下一个“按钮”）。'lb-item-div' 基本上是我将用于 ACF 转发器字段的主要元素。

<div class="lb-item-div">
        <a data-w-id="a6f46f3f-78f0-5b97-00fb-07882bd092bf" href="#" class="thumbnail_lb w-inline-block"></a>
        <div style="display:none;opacity:0" class="module">
          <div class="prev_wrapper">
            <div>Prev</div>
          </div>
          <div data-w-id="8806232c-0412-ccf0-a7a3-bda445f5d360" class="lb_big"></div>
          <div class="next_wrapper">
            <div>Next</div>
          </div>
        </div>
      </div>

是否有任何自定义代码可以添加到下一个和上一个 div 中，以便它关闭当前模块并动态打开下一个/上一个模块？

4

1 回答 1

0

您可以根据循环索引创建一个唯一的 div id，以针对每个转发器元素和您的灯箱 javascript 代码来切换视图。

https://twig.symfony.com/doc/3.x/tags/for.html#the-loop-variable

于 2021-03-07T20:26:24.710 回答