Question

当使用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>

Answer 1

通过渲染第一个图像和循环，可以使其更整洁。考虑将CSS类声明为“隐藏”以进行显示：无，然后将其用于第二张图片

<div id="lightgallery">
    <a th:each="image, iter : ${content.images}" th:class="${!iter.first} ? hidden">
        <img th:src="${image}">
    </a>
</div>

Answer 2

您可以使用属性${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>

如何显示画廊的第一张图片？

2 个答案: