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

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

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

Answer 2

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

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

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

How to display first image of gallery?

javascript

thymeleaf

lightgallery