Home>

I start by creating a test list with links to an image. I then pass it to the model as _links

@GetMapping("/{id}")
public String showItem(@PathVariable int id, Model model)
{
    List<String> imageLinks= new ArrayList<>();
    imageLinks.add("/resources/static/images/products/1/product_test_image.jpg");
    imageLinks.add("/resources/static/images/products/1/product_test_image2.jpg");
    imageLinks.add("/resources/static/images/products/1/product_test_image3.jpg");
    model.addAttribute("_links", imageLinks);
    return "item/item";
}

Then, at a certain place in the html code, I draw the number of buttons equal to the number of pictures in the _links list. I can pass the cycle number to the imgSrc method. But I can't pass the link string itself. When I try to submit it, the page stops displaying normally. Therefore, this line is commented out.

<div th:each="link, iStat : ${_links}">        <span id="current_img" th:text="${link}"></span>        <input type="image" th:src="${link}" alt="miniature" th:onclick="'imgSrc(\'' + ${iStat.index} + '\');'" style="width: 80px; height: 80px; margin: 3px">   <!--<input type="image" th:src="${link}" alt="miniature" th:onclick="'imgSrc(\'' + ${link} + '\');'" style="width: 80px; height: 80px; margin: 3px"> -->    </div>

And finally the method I'm calling. The last line is commented out, but it shows what I want to achieve. Namely, by clicking on an image in the list, I want to change the large image to the new one selected in the loop.

<script language="JavaScript">            var selectedImage= document.getElementById("current_img");
            var mainImage= document.getElementById("main_product_image");
            var debug= document.getElementById("debug");
            var debug2= document.getElementById("debug2");
            function imgSrc(link)
            {
                mainImage.src= selectedImage.innerHTML;
                debug.innerHTML= selectedImage.innerHTML;
                debug2.innerHTML= link;
            //mainImage.src= link;
            }
</script>

Curiously, the link is normally passed to the th:text file.

<span id="current_img" th:text="${link}"></span>

A fixed number of buttons to draw is not an option because the number of photos for each item may differ. Thanks in advance to everyone who answers.