如何顯示畫廊的第一張圖片？

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>