0

当使用 Thymeleaf 渲染框架使用某个目录中可用的图像（因此图像的数量是可变的）请求页面时，我填充了一个图像容器：

<div id="lightgallery">
    <a th:each="i : ${content.images}}"><img th:src="i"></a>
</div>

这样做时，所有图像都显示在彼此下方的页面上（而我只想将第一张图像显示为占位符）。当我单击其中一个时，灯光画廊将打开，其中图像为缩略图。

我现在想隐藏除第一个之外的所有图像，这将是画廊的占位符。单击它将打开图库，其中占位符图像成为图库的第一个图像。有点像这样：

<div id="lightgallery">
    <a><img src="first.png"></a>
    <a th:each="img, i : ${content.images}}" th:if="${i > 0}"><img th:src="i"></a>
</div>
4

2 回答 2

1

您可以通过将第一张图像与循环一起渲染来使其更清晰。考虑为 display: none 声明一个 CSS 类 'hidden' 并将其用于第二张图片

<div id="lightgallery">
    <a th:each="image, iter : ${content.images}" th:class="${!iter.first} ? hidden">
        <img th:src="${image}">
    </a>
</div>
于 2018-11-08T17:32:34.773 回答
0

您可以使用该属性${i.first}来判断它是否是第一张图片。这是我的做法：

<div id="lightgallery">
    <a th:href="${content.images[0]}"><img th:src="${content.images[0]}" /></a>
    <a th:href="${image}"
        style="display: none;"
        th:each="image, i: ${content.images}"
        th:unless="${i.first}"><img th:src="${image}" /></a>
</div>
于 2018-11-08T17:09:41.797 回答